With the Router
component in place, we can begin defining the different views, or routes, that our application will render for various URL paths. For example, we might want to render an About
component for the /about
path and a SignUp
component for the /sign-up
path.
To do this, we must use the Route
component provided by the react-router-dom
package. This component can be imported alongside the BrowserRouter
like so:
import { BrowserRouter as Router, Route } from `react-router-dom`
The Route
component is designed to render (or not render) a component based on the current URL path. Each Route
component should:
- be rendered inside a
Router
. - have a
path
prop indicating the URL path that will cause the route to render. - wrap the component that we want to display in the event that the
path
prop matches.
For example, the following Route
renders the About
component when the URL path matches '/about'
:
<Router> <Route path='/about'> <About /> </Route> </Router>
If your router includes a Route
with no path
prop, then that route will always match and render. You can leverage this fact to make your application render components that you want your user to see regardless of the current route, such as sidebars and navigation bars.
<Router> {/* Renders when the URL matches '/about' */ <Route path='/about'> <About /> </Route> {/* Always renders */} <Route> <Sidebar /> </Route> </Router>
Whereas other routing paradigms are static (eg. routes are predefined prior to and separate from the process of rendering), React Router’s philosophy is declarative and dynamic. This means that routes come into being when they are rendered. While this might seem more complicated than configuring our routes statically, it’s also more flexible. As you’ll see throughout this lesson, our application’s route structure can evolve based on user interactions and changing state.
Instructions
Task 1
Navigate to App.js where we will begin adding routes to our Router
. First, add the Route
component to the import statement.
Hint
To import multiple values from a package, you can write something like this:
import { valueA, valueB } from 'package';
Task 2
Next, let’s render the main routes of the application. As you can see, at the top of App.js a number of components are being imported but not used. For now, we’ll render the About
, SignUp
, Articles
, Categories
, and Profile
components.
Between the <main>
tags, use the Route
component to render the following components for their respective paths:
About
:/about
SignUp
:/sign-up
Articles
:/articles
Categories
:/categories
Profile
:/profile
Hint
Your syntax for adding a route should look something like this:
<Route path='/your-path-here'> <ChildComponent /> </Route>
Task 3
Test that your code works by navigating to these URLs in your browser. For example, to see the About
component, navigate to http://localhost:3000/about.
You should see each component render only when the URL matches the appropriate path. You should see the Header
and Footer
rendered regardless of the URL.