ReactJS Изменение маршрута с помощью кнопки, которая отображается на другом ReactDOM

У меня два рендеринга ReactDOM на моем index.js

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

Я знаю, что его нет в реагирующем маршрутизаторе, поэтому я не могу использовать ссылку, но я не знаю, что мне делать,
Вопрос в том, как мне перейти с одного маршрута на другой с помощью кнопки это рендеринг из другого ReactDOM, а не внутри ReactDOM, с помощью которого я хотел изменить маршрут?


reactjs react-dom react-router router navigateurl
person Dylan    schedule 01.11.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете создать объект 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>
);
person Tholle    schedule 01.11.2018
comment
Я использую import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'; там, и это не сработало, затем я удаляю BrowserRouter as в своем коде, он работал, и все же я не понимал, почему это не сработало в BrowserRouter - person Dylan; 02.11.2018
comment
@MarkDylanBMercado BrowserRouter создает собственный history и не принимает history опору. Только Router можно передать history опору. - person Tholle; 02.11.2018

arrow_upward
0
arrow_downward

Почему бы не использовать компонент заголовка оболочки с «withRouter»?

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

person Reactify    schedule 01.11.2018