Question

背景

我正在学习React.js课程。它非常棒且非常有用，但我在使用react-router

时遇到了错误

从我将错误输入Google时所读到的内容是版本4中react-router发生了更改。我的问题是最糟糕的，因为我正在尝试学习并同时理解它这让它有点混乱。

错误

warning.js：36警告：道具类型失败：道具history已标记根据{{1}}的要求，但其值为Router。在路由器中（在index.js：12）

问题

请详细说明为什么这在V4中不起作用

undefined

示例

<Router history={browserHistory}>

 "dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router": "^4.1.1"
  },

进口

ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/" component={Home} />
        <Route path="/services" component={Services} />
        <Route path="/portfolio" component={Portfolio} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route path="*" component={Fourofour} />
    </Router>

,
  document.getElementById('root')
);

Answer 1

更改

<Route path="/" component={Home} />

到

<Route exact path="/" component={Home} />

你可能会得到更好的结果。现在，/services（和其他路径）也会匹配/路径。

有关exact关键字的更多信息，请访问React Router V4 docs。

如果要在<Router>组件上指定历史记录，则需要在代码中手动创建历史记录（<BrowswerRouter>为您创建历史记录，因此您无需指定{{ 1}}支持它）。您可以通过创建新文件来执行此操作：

history

然后您需要使用历史记录：

// utils/history.js
import { createBrowserHistory } from 'history';

export default createBrowserHistory({
  /* pass a configuration object here if needed */
});

您还需要安装历史记录包：

import history from './utils/history';

<Router history={history}>
...

React Router V4文档也有example of using a custom history。

最后，如果您从未使用历史记录对象，则可以使用<BrowserHistory> component，它将为您管理历史记录，而无需创建自定义历史记录对象。

了解v4

1 个答案: