Skip to main content

11.04 Setting Up Router Package

Installing react-router and react-router-dom​

npm install --save react-router react-router-dom

Folder Structure​


src/
│
├── components/
│       └── Post/
│             ├── Post.css
│             └── Post.js
│
├── containers/
│        └── Blog/
│              ├── FullPost
│              │      ├── FullPost.css
│              │      └── FullPost.js
│              ├── NewPost
│              │      ├── NewPost.css
│              │      └── NewPost.js
│              ├── Posts
│              │     └── Post.js
│              ├── Blog.css
│              └── Blog.js
│
├── axios.js
├── App.js
├── App.css
├── App.test.js
├── index.js
├── index.css
│

App.js​

caution

First of all need to enable routing in our react app, we do this in the index.js or the app.js file. There you now need to wrap the part which should be able to render routes and to read routes, you need to wrap it with a component you import from the react-router-dom package.

App.js
import React, { Component } from "react";
import { BrowserRouter } from "react-router-dom";
import Blog from "./containers/Blog/Blog";

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Blog />
        </div>
      </BrowserRouter>
    );
  }
}

export default App;