ReactJs 动态组件渲染动态路由

Question

在我基于用户选择的应用程序类型的项目中，组件必须呈现并进一步导航到不同的路径。在所有这些应用程序中，布局保持不变。我必须根据路线添加不同的组件。首页主组件

<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>

如何根据选择的 application 动态呈现 Home 中的组件，然后在 button click 路由到 dynamic routes 及其 dynamic components？我是 ReactJs 的新手，不知道该怎么做。

Answer 1

您可以拥有一个包含所有路线和组件的对象：

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>

ReactJs 动态组件渲染动态路由

ReactJs dynamic component render with dynamic routes

javascript

dynamic

reactjs

react-router