使用react-router 4.0.0的路由器历史记录

Question

在react-router 4.0.0 ，历史记录似乎已经改变，使用以下index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory } from 'react-router';
import App from './components/App';
import './index.css';

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={App} />
  </Router>, document.getElementById('root')
);

我明白了：

Warning: Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`.

然后是错误。 我浏览了代码，但找不到任何示例或API如何更改。

Answer 1

React Router v4改变了一点点。 他们制作了单独的顶级路由器元素。 在代码中用<HashRouter>替换<Router history={hashHistory}> 。

希望这会有所帮助。

import {HashRouter,Route} from 'react-router-dom';

<HashRouter>
    <Route path = "/getapp" component = {MainApp} />
</HashRouter>

Answer 2

hashHistory不再是react-router的导出对象。 如果要使用哈希历史记录，则只需呈现<HashRouter> 。

import { HashRouter } from 'react-router-dom'

ReactDOM.render((
  <HashRouter>
    <App />
  </HashRouter>
), holder)

Answer 3

这是RR文档应该增加更多清晰度的主题...要回答您的问题，您可以使用BrowserRouter ，也可以使用路由器并将其传递给历史记录实例。

当所有路线更改都通过链接组件时，请使用第一种方法。

但是，当您需要从商店方法更改路线时，您需要使用后一种方法。 您可以编写一个模块来创建和导出历史对象，然后在您的路由器组件和存储方法中使用相同的对象。 使用相同的对象非常重要，否则路由器将无法正确地将URL更改与您的商店同步。

Answer 4

您可以尝试以下代码：

import { Router } from 'react-router'
import createBrowserHistory from 'history/createBrowserHistory'

const history = createBrowserHistory()

<Router history={history}>
  <App/>
</Router>

在这里查看文档 。