路由器历史与反应路由器4.0.0

Question

在react-router 4.0.0历史provisoning似乎有所改变，具有以下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

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

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

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

Answer 2

这是一个话题，其中RR文件应增加更多的清晰......要回答你的问题，你可以使用一个BrowserRouter，也可以使用路由器，它传递一个history实例。

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

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

Answer 3

你可以试试下面的代码：

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

const history = createBrowserHistory() 

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

检查doc这里。

Answer 4

React Router v4改变了一些事情。他们制造了独立的顶级路由器元件。在您的代码中将<Router history={hashHistory}>替换为<HashRouter>。

希望这会帮助完整。

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

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