如何在reactjs的子组件中进行动态路由？

Question

就我而言，我的应用程序中有 6 个菜单。 在标题部分，我有“下一步”和“后退”按钮。 如果我点击下一步按钮，它应该导航到下一个菜单，对于后退按钮，它应该导航到上一页。 header.js 是一个单独的组件。 代码附在下面

应用程序.js

render() {
        return (
            <Router>
                <div className="h-100">
                    <Header />
                    <ContentNavigation />
                        <Switch>
                            <Route exact path='/' component={WelcomeMenu} />
                            <Route path='/principal' component={PrincipleMenu} />
                            <Route path='/mycar' component={MycarMenu} />
                            <Route path='/abc' component={abcMenu} />
                            <Route path='/ijkmenu' component={ijkMenu} />
                            <Route path='/xyzmenu' component={xyzMenu} />
                        </Switch>

                </div>
            </Router>
        );
    }

头文件.js

render() {
        return (
                   <div className="header-right text-right header-text-pd-tp">
                    <span>
                         <i className ="icon-arrow-left prev-next-icon prev-icon"></i> 
                         BACK 
                   </span>
                    Current Chapter
                        <span> 
                         NEXT
                        <i className="icon-arrow-right prev-next-icon next-icon" aria-hidden="true"></i> 
                       </span>
                    </div>
       )
    }

Answer 1

这是进行路由的一种方式

this.props.history.push({
                pathname: '/your_route_path'
            })

Answer 2

多种方式 - 您可以导航到其他组件。

1 - 使用Link

import {Link} from 'react-router-dom'

<Link to="/ijkmenu"> 
      NEXT
    <i className="icon-arrow-right prev-next-icon next-icon" aria-hidden="true"></i> 
</Link>

2 - 使用this.props.history.push()

<span onClick={()=> this.props.history.push('/ijkmenu')}> 
          NEXT
        <i className="icon-arrow-right prev-next-icon next-icon" aria-hidden="true"></i> 
   </span>