Блог

Я пытаюсь настроить базовый маршрутизатор в своем приложении React. У меня просто Main.js файл, который всегда открывается и находится внутри Main.js файл У меня есть href, который переходит к User.js

В моем App.js , я пытаюсь настроить маршрутизатор

 import React from 'react';
import { Route, Switch, Router } from 'react-router-dom';
import './App.css';

import Main from './components/Main';
import User from './components/User';

function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/user" component={User} />
          <Route path="/" exact component={Main} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;
 

Затем в Main.js У меня есть что-то вроде:

 <a href="/user">
 

Когда я запускаю приложение, браузер показывает ошибку:

 TypeError: props.history is undefined
modules/Router.js:20

this.state = {
   location: props.history.location
};
 

Нет ошибки в терминале React.

вы должны использовать BrowserRouter

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

или вы можете переименовать в соответствии с вашим текущим синтаксисом

 import {BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'
 

вы также должны использовать Link тег для навигации внутри маршрутизатора на всякий случай.

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

и использовать как

 <Link to={`/user`} >
 

После внесения изменений в React Router, начиная с версии 4.0.0, вы должны использовать BrowserRouter из пакета react-router-dom при использовании browserHistory.

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

  <BrowserRouter>
    <Switch>
      <Route path="/user" render={props => <User {...props}/>}/>
      <Route path="/" render={props => <Main {...props}/>}/>
    </Switch>
  </BrowserRouter>,
 

или

   <BrowserRouter>
    <Switch>
      <Route path="/user" component={User}/>
      <Route path="/" component={Main}/>
    </Switch>
  </BrowserRouter>,
 

вам нужно изменить оператор импорта, как показано ниже:

импортируйте {Route, Switch, BrowserRouter как маршрутизатор} из ‘react-router-dom’;