Goal

We will use React Router v4 to show a list of Book, each Book has its own link. Clicking on any Book item will show corresponding Component depending on the id in the Url:

How to

Project Structure

Install Packages

We need react-router-dom to apply Router. Add it to dependencies in package.json:

1

2

3

4

5

6

7

{

...

"dependencies": {

...

"react-router-dom":"4.2.2",

}

}

Then run cmd yarn install.

Configure Webpack

Open webpack.config.js:

1

2

3

4

5

6

7

8

9

10

11

12

13

constpath=require('path');

module.exports={

...

module:{

rules:[...]

},

devtool:'cheap-module-eval-source-map',

devServer:{

contentBase:path.join(__dirname,'public'),

historyApiFallback:true

}

};

historyApiFallback option is specifically for webpack-dev-server. Setting it true will effectively ask the server to fallback to index.html when a requested resource cannot be found (404 occurs).

Create Components

– For each Page that displays when clicking on Navigation item, we add one Component. So we have 3 Components: Dashboard, AddBook, Help.
– We need a Component for 404 status, it’s called NotFound.
– Now, we put a group of NavLink in header of Header Component:

NavLink provides accessible navigation around our application, we use 2 attributes:
– to: location to link to.
– activeClassName: class to give the element when it is active.
– exact: when true, the activeClass will only be applied if the location is matched.

We also create EditBook Component for responding /book/:id request. It receives id as params:

1

2

3

4

5

6

7

8

9

importReactfrom'react';

constEditBook=(props)=> (

<div className='container__box'>

Edit the Book with id = {props.match.params.id}

</div>

);

exportdefaultEditBook;

This is code for DashBoard Component which has list of Books, we use Link for each item:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

importReactfrom'react';

import{Link}from'react-router-dom';

constDashBoard=()=> (

<div className='container__list'>

Book List:

<ul>

<li><Link to='/book/1'>Book 1</Link></li>

<li><Link to='/book/2'>Book 2</Link></li>

<li><Link to='/book/3'>Book 3</Link></li>

</ul>

</div>

);

exportdefaultDashBoard;

Create Router

Inside routers/AppRouter.js:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

importReactfrom'react';

import{BrowserRouter,Route,Switch}from'react-router-dom';

importHeaderfrom'../components/Header';

importDashBoardfrom'../components/DashBoard';

importAddBookfrom'../components/AddBook';

importEditBookfrom'../components/EditBook';

importHelpfrom'../components/Help';

importNotFoundfrom'../components/NotFound';

constAppRouter=()=> (

<BrowserRouter>

<div className='container'>

<Header />

<Switch>

<Route path="/"component={DashBoard}exact={true} />

<Route path="/add"component={AddBook} />

<Route path="/book/:id"component={EditBook} />

<Route path="/help"component={Help} />

<Route component={NotFound} />

</Switch>

</div>

</BrowserRouter>

);

exportdefaultAppRouter;

– Because we will handle dynamic requests /book/:id, so we use BrowserRouter. If you have a server that only serves static files, just use HashRouter.

– We use Switch to group Route. It will iterate over children and only render the first child that matches current path.

– When Switch comes to the last Route which doesn’t specifies path, it will definitely render the component => we use this case for 404 page.

grokonez

ABOUT US
We are passionate engineers in software development by Java Technology & Spring Framework. We believe that creating little good thing with specific orientation everyday can make great influence on the world someday.