使用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>

在這里查看文檔 。