javascript - 忽略 history Prop

Question

我使用的是 React 路由在线类(class)中的以下代码:

import { Router, Route, browserHistory } from 'react-router';

ReactDOM.render(
  <Router history={browserHistory}>
     <Route path="/" component={App></Route>
     <Route path="/One" component={One}></Route>

     <Route path="/Two" component={Two}></Route>
  </Router>, document.getElementById('root'));

它给了我以下错误 'react-router' does not contain an export named 'browserHistory'.

我做了一些研究，发现我使用的是 React Router v4，而上面的代码是针对 v3 的，所以我发现我应该使用 <BrowserRouter>而不是 <Router>所以我将代码更改为:

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

ReactDOM.render(
   <BrowserRouter history={History}>

     <div> 
    <Route path="/" component={App}></Route>

    <Route path="/One" component={One}></Route>

    <Route path="/Two" component={Two}></Route>


    <Route path="*" component={NoMatch}></Route>

  </div></BrowserRouter>, document.getElementById('root'));

历史我在一个单独的文件中:

import { createBrowserHistory } from 'history'

export default createBrowserHistory();

现在页面加载没有错误，但如果我使用 Developer 工具，我会看到警告:

Warning: <BrowserRouter> ignores the history prop. To use a custom history, use `import { Router }` instead of `import { BrowserRouter as Router }`."

另一个问题是 <Route path="*" component="NoMatch}></Route>只应该加载 NoMatch当路由器中没有指定路径时组件，但它会加载到每个页面上，无论如何。谁能帮我弄清楚如何解决这些问题？

Answer 1

我假设你正在使用 react-router v4

首先，而不是<BrowserRouter>利用<Router>

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

您可以使用 <withRouter> 访问历史对象的属性如前所述Here

使用 <withRouter> 导出组件, 像这样的:

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class SomeComponent extends Component {
render() {}
}
export default withRouter(SomeComponent);

其次，您可以使用 <Switch>因为它呈现第一个 child <Route>或 <Redirect>匹配位置

你可以包装一个<Switch>在<div>像这样:

   <Router>
      <div> 
        <Switch>
         <Route path="/" component={App}></Route>
         <Route path="/One" component={One}></Route>
         <Route path="/Two" component={Two}></Route>
         <Route component={NoMatch}></Route>
        </Switch>
      </div>
   </Router>

注意:最后一条路线没有path="*"

您可以阅读更多关于 <Switch> 的信息在 ReactTraining Github 上

如果您想阅读更多关于 React Router V4 的信息或 <withRouter> , 你可以在这个上阅读Medium Article