Как я могу проложить маршрут с одной страницы на другую, если ее маршрут находится в другом файле

Question

Я использую React.js, мой файл маршрутов выглядит следующим образом -> app.js имеет 3 основных маршрута

• Маршруты 1 (больше маршрутов внутри)

<Switch>
      <Route path='/auth' component={Auth}/>
      <Route path='/panel' component={Panel}/>
      <Route path='/show' component={Show}/>
    </Switch>

• Маршруты 2 (больше маршрутов внутри)

<Switch>
      <Route exact path='/panel/products' component={Products}/>
      <R<Route exact path='/panel/products1' component={Products1}/>
      <Route exact path='/panel/products2' component={Products2}/>
</Switch>

• Маршруты 3 (больше маршрутов внутри)

<Switch>
  <Route exact path='/show/message' component={Message}/>
</Switch>

теперь, когда я пытаюсь перейти с дочернего маршрута маршрута 2, используя this.props.push ('/ show / message') к маршруту 3, он не работает, просто перенаправитьмне по умолчанию маршрут Маршрутов 2

Это работает нормально Когда я маршрутизации внутри маршрута 2, есть ли какое-либо решение ???

Answer 1

Вы уверены, что метод push() вызывается с использованием this.props.push()?В любом случае, попробуйте обернуть ваш компонент withRouter HOC, чтобы он мог получать реквизиты, такие как match, location и history.Затем используйте опору history, чтобы добавить новую запись в стек истории.Например, используя компонент Products2, попробуйте следующий код:

import React from 'react';
import { withRouter } from 'react-router';
class Products2 extends Component {
   render(){
     const { match, location, history } = this.props;
     return (
         <button onClick={() => history.push('/show/message')}>Redirect to third route</button>
     );
   }
}

export default withRouter(Products2);

Другой подход, который вы можете попробовать, - передать реквизиты родительского маршрута дочернему маршруту.

import React from 'react';
import { Route, Switch } from 'react-router-dom';
//import here your child components

class Panel extends Component {
   render(){
     return (
     <Switch>
        <Route exact path='/panel/products' render={() => <Products parentProps={this.props} />}/>
        <Route exact path='/panel/products1' component={Products1}/>
        <Route exact path='/panel/products2' component={Products2}/>
     </Switch>
     );
   }
}

export default Panel;

Затем в компоненте Products введите this.props.parentProps.history.push('/show/message')