React 路由可选参数不起作用（react-router-dom：4.1.2 版）答案

【问题标题】：React routing optional parameter not working (react-router-dom: version 4.1.2)React 路由可选参数不起作用（react-router-dom：4.1.2 版）
【发布时间】：2018-05-10 13:18:41
【问题描述】：

我的 AdministratePage 显示用户集合。为了管理给定用户，我尝试应用一个可选参数，如下所示：

import { Router, Route } from 'react-router-dom';

<Route path="/admin" component={AdministratePage} >    
  <Route path="/:id" component={AdministratePage} />
</Route>

路由 /admin 工作正常并显示 AdministratePage。但是使用参数，例如 /admin/abc 结果是一个空白页。

我还尝试了以下语法：

<Route path="/admin/:id?" component={AdministratePage} />

.. 没有运气。

我的 AdministratePage 尚未配置为进行过滤，因此它目前应该只显示所有用户。

为了它的价值：我的 webpack.config.js 包含：

 devServer: {
        historyApiFallback: true
    }

我正在使用“react-router-dom”：“^4.1.2”。谢谢。

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

试试这个

<Route path="/admin" component={AdministratePage} />
<Route path="/admin/:id" component={AdministratePage} />

【讨论】：

还是没有运气。前者显示 AdministratePage ok，后者显示空白页。
嗯，如果你添加exact。 <Route exact path="/admin" component={AdministratePage} />

【解决方案2】：

实际的问题是找不到捆绑包。

见React routing, path not working, bundle not found。我希望它可以帮助某人。

【讨论】：

【解决方案3】：

确保在您的index.html 中使用bundle.js 的绝对路径，如<script src="/bundle.js" /> 而不是<script src="bundle.js" />

【讨论】：