The Basics of React Router

Things needed to create a route:

• Router: check whether the requested URL exist in pre-defined routes
• Route: define the URL path and component to be loaded
• Link: provide navigation between pages

1
2
3
4
5
6
<Router>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
    <Route path="/" component={IndexPage} />
    <Route path="/about" component={AboutPage} />
</Router>

Something to note:

• Link has to be children of Router
• Link is different from HTML <a> tag whereby Link allows client-side routing by checking with Router which checks with Routes; <a> create server-side routing

Matching exact route

1
2
<Route exact path="/" component={IndexPage} />
<Route exact path="/about" component={AboutPage} />

Credits

• https://learnwithparam.com/blog/basic-routing-in-react-router/