React 中的路由器开关

Question

我正在尝试在我的 React 应用程序中设置一个基本的路由器。我只有始终打开的 Main.js 文件，在 Main.js 文件中我有一个导航到 User.js

的 href

在我的 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 终端没有错误。

Answer 1

从 4.0.0 开始对 React Router 进行更改后，您应该在使用 browserHistory 时使用 react-router-dom 包中的 BrowserRouter。

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>,

Answer 2

你应该使用 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`} >

Answer 3

您需要更改导入语句如下：

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

React 中的路由器开关

Router Switch in React

router

reactjs