Skip to content

Commit

Permalink
Update redirects example for Gatsby v2 (#5681)
Browse files Browse the repository at this point in the history
  • Loading branch information
@piotrkwiecinski @pieh
piotrkwiecinski authored and pieh committed Jun 4, 2018
1 parent 924581a commit 667d079
Show file tree
Hide file tree
Showing 7 changed files with 150 additions and 136 deletions.
9 changes: 7 additions & 2 deletions examples/using-redirects/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,19 @@
"description": "Gatsby example site demonstrating using createRedirect for client-side, in browser redirection in Gatsby",
"author": "Ricky de Laveaga <ricky@rdela.com>",
"dependencies": {
"gatsby": "latest",
"gatsby": "next",
"gatsby-plugin-react-helmet": "latest",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-helmet": "^5.2.0"
},
"keywords": [
"gatsby"
],
"license": "MIT",
"main": "n/a",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop"
}
}
}
0 ...les/using-redirects/src/layouts/index.css → ...using-redirects/src/components/layout.css
View file
File renamed without changes.
6 changes: 3 additions & 3 deletions ...ples/using-redirects/src/layouts/index.js → .../using-redirects/src/components/layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import PropTypes from "prop-types"
import { Link } from "gatsby"
import Helmet from "react-helmet"

import "./index.css"
import "./layout.css"
import "./selected.css"

const Header = () => (
Expand Down Expand Up @@ -55,13 +55,13 @@ const TemplateWrapper = ({ children }) => (
paddingTop: 0,
}}
>
{children()}
{children}
</div>
</div>
)

TemplateWrapper.propTypes = {
children: PropTypes.func,
children: PropTypes.node.isRequired,
}

export default TemplateWrapper
0 .../using-redirects/src/layouts/selected.css → ...ing-redirects/src/components/selected.css
View file
File renamed without changes.
11 changes: 7 additions & 4 deletions examples/using-redirects/src/pages/404.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import React from "react"
import Layout from "../components/layout"

const NotFoundPage = () => (
<div>
<h1>NOT FOUND</h1>
<p>You just hit a route that doesn&#39;t exist... the sadness.</p>
</div>
<Layout>
<div>
<h1>NOT FOUND</h1>
<p>You just hit a route that doesn&#39;t exist... the sadness.</p>
</div>
</Layout>
)

export default NotFoundPage
139 changes: 71 additions & 68 deletions examples/using-redirects/src/pages/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,79 @@
import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"

const IndexPage = () => (
<div>
<h1>Hi people</h1>
<p>
Welcome to your new Gatsby
<code>
<a href="https://github.com/gatsbyjs/gatsby/search?utf8=%E2%9C%93&q=createRedirect">
createRedirect
<Layout>
<div>
<h1>Hi people</h1>
<p>
Welcome to your new Gatsby
<code>
<a href="https://github.com/gatsbyjs/gatsby/search?utf8=%E2%9C%93&q=createRedirect">
createRedirect
</a>
</code>
&nbsp;<a href="https://www.gatsbyjs.org/docs/bound-action-creators/">
bound action creator
</a>
</code>
&nbsp;<a href="https://www.gatsbyjs.org/docs/bound-action-creators/">
bound action creator
</a>
{` `}
example.
</p>
<p>
These paths redirect{` `}
<Link activeClassName="selected" to="/">
here
</Link>:
</p>
<ul>
<li>
<Link to="/grape">/grape</Link>
</li>
<li>
<Link to="/juice">/juice</Link>
</li>
</ul>
<p>
The{` `}
<Link activeClassName="selected" to="/">
here
</Link>
{` `}
link uses{` `}
<a href="https://www.gatsbyjs.org/packages/gatsby-link/">gatsby-link</a>
{` `}
<code>activeClassName</code>
&nbsp;support derived from{` `}
<a href="https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md">
React Router’s NavLink component
</a>
{` `}
to apply the <code>selected</code>
&nbsp;class to links that match to the active path, and{` `}
<code>import './selected.css'</code>
&nbsp;in <code>/src/layouts/index.js</code>
&nbsp;makes the <code>.selected {`{ color: #396; }`}</code> &nbsp;style
declaration globally available to both&nbsp;pages.
</p>
<p>These paths redirect to page 2:</p>
<ul>
<li>
<Link to="/blue">/blue</Link>
</li>
<li>
<Link to="/randirect">/randirect</Link>
</li>
<li>
<Link to="/randorect">/randorect</Link>
</li>
</ul>
<p>
Check <code>/gatsby-node.js</code> &nbsp;to see how. Then go build
something great.
</p>
<Link to="/page-2/">Go to page 2</Link>
</div>
{` `}
example.
</p>
<p>
These paths redirect{` `}
<Link activeClassName="selected" to="/">
here
</Link>:
</p>
<ul>
<li>
<Link to="/grape">/grape</Link>
</li>
<li>
<Link to="/juice">/juice</Link>
</li>
</ul>
<p>
The{` `}
<Link activeClassName="selected" to="/">
here
</Link>
{` `}
link uses{` `}
<a href="https://www.gatsbyjs.org/packages/gatsby-link/">gatsby-link</a>
{` `}
<code>activeClassName</code>
&nbsp;support derived from{` `}
<a href="https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md">
React Router’s NavLink component
</a>
{` `}
to apply the <code>selected</code>
&nbsp;class to links that match to the active path, and{` `}
<code>import './selected.css'</code>
&nbsp;in <code>/src/layouts/index.js</code>
&nbsp;makes the <code>.selected {`{ color: #396; }`}</code> &nbsp;style
declaration globally available to both&nbsp;pages.
</p>
<p>These paths redirect to page 2:</p>
<ul>
<li>
<Link to="/blue">/blue</Link>
</li>
<li>
<Link to="/randirect">/randirect</Link>
</li>
<li>
<Link to="/randorect">/randorect</Link>
</li>
</ul>
<p>
Check <code>/gatsby-node.js</code> &nbsp;to see how. Then go build
something great.
</p>
<Link to="/page-2/">Go to page 2</Link>
</div>
</Layout>
)

export default IndexPage
121 changes: 62 additions & 59 deletions examples/using-redirects/src/pages/page-2.js
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,70 @@
import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"

const SecondPage = () => (
<div>
<h1>Hi from the second page</h1>
<p>
Welcome to page 2 of your
<code>
<a href="https://github.com/gatsbyjs/gatsby/search?utf8=%E2%9C%93&q=createRedirect">
createRedirect
<Layout>
<div>
<h1>Hi from the second page</h1>
<p>
Welcome to page 2 of your
<code>
<a href="https://github.com/gatsbyjs/gatsby/search?utf8=%E2%9C%93&q=createRedirect">
createRedirect
</a>
</code>
&nbsp;<a href="https://www.gatsbyjs.org/docs/bound-action-creators/">
bound action creator
</a>
</code>
&nbsp;<a href="https://www.gatsbyjs.org/docs/bound-action-creators/">
bound action creator
</a>
&nbsp;example.
</p>
<p>
These paths redirect{` `}
<Link activeClassName="selected" to="/page2/">
here
</Link>:
</p>
<ul>
<li>
<Link to="/donut">/donut</Link>
</li>
<li>
<Link to="/page2">/page2</Link> (missing hyphen between page and 2 and
trailing slash)
</li>
<li>
<Link to="/page2/">/page2/</Link> (missing hyphen between page and 2)
</li>
</ul>
<p>
Note how the trailing slash changes disappears and reappears in the
address bar path when following the last two <code>/page2</code>
&nbsp;links&nbsp;above. This demonstrates the need to handle
trailing-slashed and non-trailing-slashed versions of{` `}
<code>fromPath</code>
&nbsp;separately when using <code>createRedirect</code> &nbsp;in{` `}
<code>/gatsby-node.js</code>. Gatsby serves{` `}
<a href="https://www.gatsbyjs.org/docs/building-with-components/">
page components
</a>
&nbsp;at either version by default, but we need to explicitly redirect
both versions independently (More on{` `}
<a href="https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#removing-trailing-slashes">
handling trailing&nbsp;slashes
</a>).
</p>
<p>These paths redirect to the homepage:</p>
<ul>
<li>
<Link to="/orange">/orange</Link>
</li>
<li>
<Link to="/soda">/soda</Link>
</li>
</ul>
<Link to="/">Go back to the homepage</Link>
</div>
&nbsp;example.
</p>
<p>
These paths redirect{` `}
<Link activeClassName="selected" to="/page2/">
here
</Link>:
</p>
<ul>
<li>
<Link to="/donut">/donut</Link>
</li>
<li>
<Link to="/page2">/page2</Link> (missing hyphen between page and 2 and
trailing slash)
</li>
<li>
<Link to="/page2/">/page2/</Link> (missing hyphen between page and 2)
</li>
</ul>
<p>
Note how the trailing slash changes disappears and reappears in the
address bar path when following the last two <code>/page2</code>
&nbsp;links&nbsp;above. This demonstrates the need to handle
trailing-slashed and non-trailing-slashed versions of{` `}
<code>fromPath</code>
&nbsp;separately when using <code>createRedirect</code> &nbsp;in{` `}
<code>/gatsby-node.js</code>. Gatsby serves{` `}
<a href="https://www.gatsbyjs.org/docs/building-with-components/">
page components
</a>
&nbsp;at either version by default, but we need to explicitly redirect
both versions independently (More on{` `}
<a href="https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#removing-trailing-slashes">
handling trailing&nbsp;slashes
</a>).
</p>
<p>These paths redirect to the homepage:</p>
<ul>
<li>
<Link to="/orange">/orange</Link>
</li>
<li>
<Link to="/soda">/soda</Link>
</li>
</ul>
<Link to="/">Go back to the homepage</Link>
</div>
</Layout>
)

export default SecondPage

0 comments on commit 667d079

Please sign in to comment.