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

Posted 2023-02-22

【中文标题】ReactJS 使用在其他 ReactDOM 上呈现的按钮更改路由

【英文标题】：ReactJS Changing the route using a button that is rendering on other ReactDOM

【发布时间】：2019-04-05 20:17:30

【问题描述】：

我的index.js 有两个渲染 ReactDOM

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

现在，在我的 App.js 内，我有 3 条路线

<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路由器中所以我不能使用链接，但我不知道我应该做什么， 问题是，如何使用从另一个 ReactDOM 呈现的按钮从一个路由导航到另一个路由，而不是在我想要更改路由的 ReactDOM 内部？

【参考方案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>
);

【讨论】：

我在那里使用import BrowserRouter as Router, Route, Switch from 'react-router-dom';，但它不起作用，然后我在我的代码中删除了BrowserRouter as，它仍然有效，但我仍然困惑为什么它在 BrowserRouter 上不起作用跨度>

@MarkDylanBMercado BrowserRouter 创建一个自己的 history，并且不使用 history 属性。只有Router 可以传递history 属性。

【参考方案2】：

为什么不用“withRouter”封装头部组件？

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