React router v4 - 如何组合动态路由和可选路由？

Question

我需要在根级别进行2级路由，其中​​两条路由都是动态的，第二条路由是可选的。我尝试设置如下所示的路径但是出错了。

这是我的路线配置：

<Switch>
  <Route exact path='/' component={CompOne} />
  <Route path='/:name/:id?'
      render={(routeProps) => (
          <Details {...routeProps} />
      )}
  />
</Switch>

这里我的名字是一个动态参数，id是第二个但它是可选的。

在浏览器中加载localhost:8080/vishal或localhost:8080/vishal/123时，它应该加载相同的组件。在组件内部，我检查url是否具有id。但是，我收到404错误：

https://localhost:8080/vishal/123/bootstrap.min.css

https://localhost:8080/vishal/123/bundle.js

如果我在（）中包含可选参数，我会收到以下错误： <Switch> <Route exact path='/' component={CompOne} /> <Route path='/:name(/:id)?' render={(routeProps) => ( <Details {...routeProps} /> )} /> </Switch>

我得到404，如果我传入id，则找不到bundle.js。因此/ vishal工作，/ vishal / 123给出错误404 - localhost:8080/vishal/bundle.js。

Answer 1

试试这个......

<div class="mycard col-md-5">
content
</div>
<div class="mycard col-md-5">
content
</div>
<div class="mycard col-md-5">
content
</div>
<div class="mycard col-md-5">
content
</div>
<div class="clear"></div>

.clear {
clear: both;
}