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改变了一点点。他们制作了单独的顶级路由器元素。在代码中将<Router history={hashHistory}>替换为<HashRouter>。

希望这会有所帮助。

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，也可以使用路由器并将其传递给history实例。

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

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

Answer 4

您可以尝试以下代码：

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

const history = createBrowserHistory()

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

点击doc此处。

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

4 个答案: