<BrowserRouter>忽略历史道具

Question

我在React路由的在线课程中使用以下代码:

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>提到的来访问历史对象的属性

使用导出组件<withRouter>，类似于：

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

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

其次，您可以利用<Switch>它渲染第一个孩子<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>，可以阅读这篇中等文章

Answer 2

您只能history与<Router>错误消息一起使用。请参阅 React-router 文档中侧边栏的 API。

浏览器路由器

<BrowserRouter>
 basename: string
 getUserConfirmation: func
 forceRefresh: bool
 keyLength: number
 children: node

路由器

<Router>
 history: object
 children: node

https://reacttraining.com/react-router/web/api/Router/history-object

至于不匹配，您需要一个开关并将最后一个组件放置在没有路径的情况下。现在你正在抓住每条路线path="*"

再次，请参阅文档https://reacttraining.com/react-router/web/example/no-match

<Switch>
  <Route path="/" exact component={Home}/>
  <Redirect from="/old-match" to="/will-match"/>
  <Route path="/will-match" component={WillMatch}/>
  <Route component={NoMatch}/>
</Switch>