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>提及Here

来访问历史记录对象的属性

使用<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="*"

您可以在ReactTraining Github

上详细了解<Switch>

如果您想了解有关React Router V4或<withRouter>的更多信息，请阅读Medium Article

Answer 2

您只能将history与<Router>一起使用，因此会显示错误消息。请参阅react-router docs侧栏上的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>

<browserrouter>忽略历史道具

2 个答案: