Как исправить ошибку импорта с помощью объекта Match в React Router

Question

Я новичок в React и Redux ... Мне нужно использовать объект Match в моем приложении ... но я получаю следующую ошибку ..

Попытка ошибки импорта: 'Match'не экспортируется из'act-router'.

Та же ошибка выдается и при попытке с помощью 'response-router-dom'.

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

  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;

Answer 2

Match был компонентом альфа-версии React Router v4.

В бета-версии Match было переименовано Route (иего реквизиты изменились, так что шаблон теперь является путем и является точным). Вместо этого вы должны использовать оператор Switch , который будет отображать только первый Route (или Redirect *)1014 *), что соответствует. Вы можете добавить компонент без пути в качестве последнего потомка маршрутов Switch , и он будет отображаться, если ни один из предыдущих Route's не совпадет.

Вы можете проверить APIдокументация для более подробной информации.