如何在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>