具有中央路由文件的历史对象

Question

我在网上看到了很多关于如何在 React Router 中使用 history 对象的例子。但是，我还没有偶然发现示例显示中央路由文件的情况，如下所示：

routes.js

const RouteList = () => (
  <main>
    <Switch>
      <Route path="/" exact component={HomePage} />
      <Route component={Error} />
    </Switch>
  </main>
);

export default RouteList;

App.js

render() {
    return (
        <div>
           <Header />
           <RouteList />
           <Footer />
        </div>
    );
}

history.js

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

有人可以阐明我如何在我的集中路由中使用历史记录吗？或者如果有其他类似的帖子请告诉我，非常感谢。

Answer 1

需要将自定义历史记录对象作为道具提供给路由器提供程序组件。在您的情况下，您可以在 App.js 或 RouteList 中指定路由器提供商，具体取决于 Header 和 Footer 是否也需要路由器道具。

import browserHistory from './history.js';

...
render() {
    return (
      <Router history={browserHistory}>
        <div>
           <Header />
           <RouteList />
           <Footer />
        </div>
      </Router>
    );
}

同样在您的 history.js 文件中，导入 createBrowserHistory like

import createBrowserHistory from 'history/createBrowserHistory';

具有中央路由文件的历史对象

history object with central Routes file

reactjs

react-router-v4

history.js