在我基于用户选择的应用程序类型的项目中,组件必须呈现并进一步导航到不同的路由。在所有这些应用程序中,布局保持不变。我必须根据路线添加不同的组件。 首页主要组件
<Card>
<Card.Body>
<DYNAMIC_COMPONENT /> //based on application chosen
<button onClick={()=> takeToNextRoute}>CLICK ME</button>
<Card.body>
</Card>
基于Home
中的按钮点击,用户将被带到基于Application type
的不同路线
<div>
<Router>
<Switch>
<Route exact path='/:{based on app}' component={dynamicCOMP}></Route>
<Route exact path='/about:{based on app}' component={dynamicCOMP1}></Route>
<Route exact path='/profile:{based on app}' component={dynamicCOMP2}></Route>
<Route exact path='/select:{based on app}' component={dynamicCOMP3}></Route>
</Switch>
</Router>
</div>
如何根据选择的 Home
动态渲染 application
中的组件,然后根据 button click
路由到 dynamic routes
及其 dynamic components
?我是 ReactJs 的新手,不知道如何去做。
答案 0 :(得分:0)
你可以拥有一个包含所有路由和组件的对象:
const routes = {
"/": HomeComponent,
"/about": AboutComponent,
"/profile": ProfileComponent,
"/select": SelectComponent
}
然后在您的路由器中,它看起来像:
<div>
<Router>
<Switch>
{Object.keys(routes).map((route, i) => <Route key = {i} exact path = {route} component = {routes[route]}/>
</Switch>
</Router>
</div>