Created
May 15, 2022 17:36
-
-
Save mdmarufsarker/fbdfe23e3f5d80a6e712d744615f5cb4 to your computer and use it in GitHub Desktop.
Since routes are regular React components, they may be rendered anywhere in the app, including in child elements. This helps when it's time to code-split your app into multiple bundles because code-splitting a React Router app is the same as code-splitting any other React app.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import { | |
BrowserRouter as Router, | |
Switch, | |
Route, | |
Link, | |
useParams, | |
useRouteMatch | |
} from "react-router-dom"; | |
// Since routes are regular React components, they | |
// may be rendered anywhere in the app, including in | |
// child elements. | |
// | |
// This helps when it's time to code-split your app | |
// into multiple bundles because code-splitting a | |
// React Router app is the same as code-splitting | |
// any other React app. | |
export default function NestingExample() { | |
return ( | |
<Router> | |
<div> | |
<ul> | |
<li> | |
<Link to="/">Home</Link> | |
</li> | |
<li> | |
<Link to="/topics">Topics</Link> | |
</li> | |
</ul> | |
<hr /> | |
<Switch> | |
<Route exact path="/"> | |
<Home /> | |
</Route> | |
<Route path="/topics"> | |
<Topics /> | |
</Route> | |
</Switch> | |
</div> | |
</Router> | |
); | |
} | |
function Home() { | |
return ( | |
<div> | |
<h2>Home</h2> | |
</div> | |
); | |
} | |
function Topics() { | |
// The `path` lets us build <Route> paths that are | |
// relative to the parent route, while the `url` lets | |
// us build relative links. | |
let { path, url } = useRouteMatch(); | |
return ( | |
<div> | |
<h2>Topics</h2> | |
<ul> | |
<li> | |
<Link to={`${url}/rendering`}>Rendering with React</Link> | |
</li> | |
<li> | |
<Link to={`${url}/components`}>Components</Link> | |
</li> | |
<li> | |
<Link to={`${url}/props-v-state`}>Props v. State</Link> | |
</li> | |
</ul> | |
<Switch> | |
<Route exact path={path}> | |
<h3>Please select a topic.</h3> | |
</Route> | |
<Route path={`${path}/:topicId`}> | |
<Topic /> | |
</Route> | |
</Switch> | |
</div> | |
); | |
} | |
function Topic() { | |
// The <Route> that rendered this component has a | |
// path of `/topics/:topicId`. The `:topicId` portion | |
// of the URL indicates a placeholder that we can | |
// get from `useParams()`. | |
let { topicId } = useParams(); | |
return ( | |
<div> | |
<h3>{topicId}</h3> | |
</div> | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment