React-router is a library that lets you do routing in React. Let's use it.
Firstly, everything in your app must be surrounded by a BrowerRouter
.
And you make links to different pages using <NavLink>
. Let's make four links:
<div>
<NavLink to="/">Main Page</NavLink>
<NavLink to="/hello">Say Hello</NavLink>
<NavLink to="/about/pink">About</NavLink>
<NavLink to="/about/lightblue">About Blue</NavLink>
</div>
Note the third and fourth have url parameters. We'll use these later.
Finally, we must switch between the pages, so we use <Switch>
. Inside that we use <Route>
. And we specify a path
which relates to the to
attribute we used in the <NavLink>
s (we also say it's exactly that - no fuzzy matching). Hext we have a component
attribute we specifies the React component to render:
<Switch>
...
<Route exact path="/" component={Main} />
...
</Switch>
If we want to use url parameters, and we do in the /about/pink
and /about/lightblue
links, we specify those in the path
attribute of the <Route>
. And then they appear in props.match.params
in the component:
<Switch>
...
<Route exact path="/about/:colour" component={About} />
...
</Switch>
....
function About({ match: { params } }) {
return (
<div style={{ backgroundColor: params.colour}}>
I am the about page
</div>
)
}
Finally, if we want to pass props to our components, we use render
instead of component
. In render
we return a component and you can pass a prop to that:
<Switch>
...
<Route exact path="/hello" render={() =>
<Hello name="Jakub"></Hello>
} />
...
</Switch>
Here's the full example:
import { Route, BrowserRouter, NavLink, Switch } from 'react-router-dom';
...
function Main() {
return (
<div>I am the main page</div>
)
}
function About({ match: { params } }) {
return (
<div style={{ backgroundColor: params.colour}}>
I am the about page
</div>
)
}
function Hello({ name }) {
return (
<div>
Hello, {name}
</div>
)
}
function App() {
return (
<BrowserRouter>
<div>
<div>
<NavLink to="/">Main Page</NavLink>
<NavLink to="/hello">Say Hello</NavLink>
<NavLink to="/about/pink">About</NavLink>
<NavLink to="/about/lightblue">About Blue</NavLink>
</div>
<hr />
<Switch>
<Route exact path="/" component={Main} />
<Route exact path="/about/:colour" component={About} />
<Route exact path="/hello" render={() =>
<Hello name="Jakub"></Hello>
} />
</Switch>
</div>
</BrowserRouter>
)
}