Learning Redux

Defining the <Router> and <Route>

The next step is wrapping our App in a <Router> component and defining some <Route> components. Perform the following steps:

1. Edit src/components/App.jsx and import the Router (specifically, BrowserRouter) and Route components:

import { BrowserRouter as Router, Route } from 'react-router-dom'

2. Next, we need to import our page components:

import MainPage from './pages/MainPage.jsx'import AboutPage from './pages/AboutPage.jsx'

3. Then, wrap the whole App component's contents with the <Router> component:

const App = ({ store }) =>  <Provider store={store}>    <Router>      <div>        <h1>React/Redux blog</h1>        <div><ConnectedLoading /></div>        <div><ConnectedErrorMessage /></div>        <hr />        <div><ConnectedHeader /></div> <hr /> ...