ReactJS 使用在其他 ReactDOM 上呈现的按钮更改路由

Question

我的 index.js

有两个渲染 ReactDOM

ReactDOM.render(<Header />, document.getElementById('header'));
ReactDOM.render(<App />, document.getElementById('root'));

现在，在我的 App.js 里面，我有三个路线

<Router>
    <Switch>
        <Route exact path = "/" component = { page1 }/>
        <Route path = "/page1" component = { page1 }/>
        <Route path = "/page2" component = { page2 }/>
    </Switch>
</Router>

然后在我的 Header.js 文件中，我有一个按钮，我想用它导航到另一个路由或页面

<button onClick={() => this.props.history.push('/page2')}> Next </button>

但问题是我说

时出错

TypeError: Cannot read property 'push' of undefined

我知道它不在 react 路由器中所以我不能使用 link，但我不知道我必须做什么，
问题是，我如何使用从另一个 ReactDOM 渲染的按钮从一条路线导航到另一条路线，而不是在我想用来更改路线的 ReactDOM 内部？

Answer 1

您可以使用 history 库手动创建 history 对象，并从一个单独的模块导出该对象，您可以将该模块提供给 Router 组件并在 Header 组件中使用。

例子

// history.js
import createHistory from 'history/createBrowserHistory';

const history = createHistory();

export default history;

// App.js
import history from './history';

export default () => (
  <Router history={history}>
    <Switch>
      <Route exact path = "/" component = { page1 }/>
      <Route path = "/page1" component = { page1 }/>
      <Route path = "/page2" component = { page2 }/>
    </Switch>
  </Router>
);

// Header.js
import history from './history';

export default () => (
  <button onClick={() => history.push('/page2')}> Next </button>
);

Answer 2

为什么不使用“withRouter”包装头组件？

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md

ReactJS 使用在其他 ReactDOM 上呈现的按钮更改路由

ReactJS Changing the route using a button that is rendering on other ReactDOM

router

navigateurl

reactjs

react-router

react-dom