javascript – 忽略历史道具

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

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

ReactDOM.render(
  browserHistory}>
     

它给了我一个跟随错误’react-router’不包含名为’browserHistory’的导出.

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

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

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

     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组件,无论如何.
任何人都可以帮助弄清楚如何解决问题？

最佳答案

我假设你正在使用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>因为它呈现第一个孩子< Route>或<重定向>匹配位置

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

注意：上次路由没有path =“*”

您可以阅读有关< Switch>的更多信息.在ReactTraining Github年

如果您想了解更多有关React Router V4或< withRouter>的信息,请参阅,你可以阅读这个Medium Article