我在React路由的在线课程中使用以下代码：
import { Router,Route,browserHistory } from 'react-router';
ReactDOM.render(
它给了我一个跟随错误’react-router’不包含名为’browserHistory’的导出.
我做了一些研究,发现我使用的是React Router v4,上面的代码是针对v3的,所以我发现我应该使用< BrowserRouter>而不是< Router>所以我将我的代码更改为：
import { BrowserRouter,Switch } from 'react-router-dom';
ReactDOM.render(
历史我在一个单独的文件中：
import { createBrowserHistory } from 'history'
export default createBrowserHistory();
现在页面加载没有错误但是如果我使用Developer工具,我可以看到一个警告：
Warning: 另一个问题是< 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
