Question

我是React / Redux的新手，我想知道如何管理历史我使用BrowserRouter包中的react-router-dom，实际上，它似乎已经很好地处理了它。我的意思是后退按钮正常工作。

但我想了解为什么或者这是否是处理历史的正确方法。任何人都可以这么善意向我解释这件事吗？

这是我的index.js。

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore, applyMiddleware} from 'redux';
import {Provider} from 'react-redux';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import Home from './components/home';
import Contract from './components/contract';
import NotFound from './components/not-found';
import ScrollToTop from './components/scroll-to-top';

import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(<Provider store={createStoreWithMiddleware(reducers)}>
  <BrowserRouter>
    <ScrollToTop>
    <Switch>
      <Route exact path="/" component={Home}/>
      <Route path="/contract/:contractId" component={Contract}/>
      <Route path="*" component={NotFound} status={404}/>
    </Switch>
    </ScrollToTop>
  </BrowserRouter>
</Provider>, document.getElementById('root'));

Answer 1

应用中的浏览器历史记录管理由React Router完成。 Redux可以完全不知道它。 React Router管理历史记录的方式是history package，它是window.location.history对象的一个小包装器（用于实现之间的方便和一致性）。此对象作为prop组件传递给Route组件，因此您可以通过它来控制历史记录，并且它也作为prop传递给Router组件，因此当历史对象发生更改时（通过用户操作或代码，react将重新计算DOM（“rerender”）））。有关详细信息，请参阅here

React / Redux应用如何管理其历史记录？

1 个答案: