How to fix an import error using a Match object in React Router

Question

I'm a quite beginner to React and Redux...I need to use Match object in my application...but I'm getting the following error..

Attempted import error: 'Match' is not exported from 'react-router'.

Same error is given when tried with 'react-router-dom' as well.

import React from 'react';
import logo from './logo.svg';
import './App.css';
import {Link} from 'react-router-dom'
import {Match} from 'react-router';
import GamesPage from './GamesPage'
//import './reducers/games'


function App() {
  return (
    <div className="App">
      <div className="App-header">
        <img src={logo} className="App-logo" alt="logo" />

        </div>
      <p>
          <Link to="games">Games</Link>
        </p>

        <Match pattern="/games" component={GamesPage} />

    </div>
  );
}

export default App;

Answer 1

Match was component in the alpha release of React Router v4.

In the beta, Match has been renamed Route (and its props have changed so that pattern is now path and exactly is exact).Instead you should use a Switch statement, which will only render the first Route (or Redirect) that is matched. You can add a pathless component as the last child of the Switch's routes and it will render when none of the preceding Route's match.

You can check out the API documentation for more details.

Answer 2

  import React from 'react';
  import logo from './logo.svg';
  import './App.css';
  import {NavLink, Route} from 'react-router-dom'
  import GamesPage from './GamesPage'
  //import './reducers/games'


 function App() {
  return (
    <div className="App">
      <div className="App-header">
       Sample application of react router dom
       </div>
       <Router>
       <NavLink to="/games">Games</NavLink>
        <Switch>
        <Route path="/games" component={GamesPage} />
        </Switch>
       </Router>
    </div>
  );
}   
    export default App;