Add {NavLink} to React Component Showing Blank Pages

Question

I'm new to React.js and already make new react app using :

create-react-app

I already install dependency

react-router-dom

var React = require('react');
var NavLink = require('react-router-dom').NavLink;

The problem is when I add NavLink to my component, it will show blank page :

Before :

        <ul className="nav navbar-nav navbar-left">
          <li><a>Menu 1</a></li>
          <li><a>Menu 2</a></li>
        </ul>

Result : It Works

But when I add the navlink

After :

        <ul className="nav navbar-nav navbar-left">
          <li><NavLink activeClassName="active" to="/menu1">Menu 1</NavLink></li>
          <li><a>Menu 2</a></li>
        </ul>

It became blank pages : Showing Blank Page

How to fix it ?

Answer 1

use around your App.js

like in index.js first import

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

<BrowserRouter>      
   <App />
</BrowserRouter>