javascript <BrowserRouter> 忽略历史道具
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48349138/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
<BrowserRouter> ignores the history prop
提问by Coding Duchess
I was using the following code from an online course for React routing:
我在 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'));
It gave me a following error 'react-router' does not contain an export named 'browserHistory'.
它给了我以下错误 'react-router' does not contain an export named 'browserHistory'.
I did some research and found that I was using React Router v4, and the above code was for v3, so i found that I should be using <BrowserRouter>instead of <Router>so I changed my code to:
我做了一些研究，发现我使用的是 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'));
History I have in a separate file:
历史我在一个单独的文件中：
import { createBrowserHistory } from 'history'
export default createBrowserHistory();
Now the page loads without an error but if I use Developer tools, I can see a warning:
现在页面加载没有错误，但如果我使用开发人员工具，我可以看到警告：
Warning: <BrowserRouter> ignores the history prop. To use a custom history, use `import { Router }` instead of `import { BrowserRouter as Router }`."
Another issue is that <Route path="*" component="NoMatch}></Route>only supposed to load NoMatchcomponent when no path specified in the router but it loads on every page, regardless.
Can anyone help figure out how can I fix the issues?
另一个问题是，<Route path="*" component="NoMatch}></Route>只有NoMatch在路由器中没有指定路径时才应该加载组件，但无论如何它都会在每个页面上加载。任何人都可以帮助弄清楚我该如何解决这些问题？
回答by Aaqib
I am assuming you are using react-router v4
我假设您使用的是 react-router v4
Firstly,Instead of <BrowserRouter>make use of <Router>
首先，而不是<BrowserRouter>利用<Router>
import { Router } from 'react-router-dom';
You can get access to the history object's properties by using <withRouter>as mentioned Here
您可以使用此处<withRouter>提到的方法访问历史对象的属性
Export the component using <withRouter>, something like :
使用 导出组件<withRouter>，例如：
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
class SomeComponent extends Component {
render() {}
}
export default withRouter(SomeComponent);
Secondly, you can make use of <Switch>as it renders the first child <Route>or <Redirect>that matches the location
其次，您可以利用<Switch>它呈现第一个孩子<Route>或<Redirect>匹配位置
And you can wrap a <Switch>in a <div>like this:
您可以 像这样将 a 包装<Switch>在 a 中<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>
NOTE : Last Route doesn't have path="*"
注意：最后一条路线没有 path="*"
You can read more about <Switch>on a ReactTraining Github
您可以<Switch>在ReactTraining Github上阅读更多信息
If you want to read more about React Router V4 or <withRouter>, You can read on this Medium Article
如果你想阅读更多关于 React Router V4 或<withRouter>，你可以阅读这篇Medium 文章
回答by andrewgi
You can only use historywith <Router>hence the error message.
See the API on the sidebar in react-router docs.
您只能使用historywith<Router>因此错误消息。请参阅 react-router 文档侧边栏上的 API。
Browser Router
浏览器路由器
<BrowserRouter>
basename: string
getUserConfirmation: func
forceRefresh: bool
keyLength: number
children: node
Router
路由器
<Router>
history: object
children: node
https://reacttraining.com/react-router/web/api/Router/history-object
https://reacttraining.com/react-router/web/api/Router/history-object
As for the no match, you need a switch and to put the last component without a path. Right now you are grabbing every route with path="*"
至于不匹配，您需要一个开关并放置没有路径的最后一个组件。现在你正在抓住每条路线path="*"
Again, see docs https://reacttraining.com/react-router/web/example/no-match
同样，请参阅文档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>
