React Router - 带有可选参数的路由不起作用

Question

我正在使用 react 和 react-router。在我的反应路由器配置中，我想添加一个将接受以下 URL 的路由：http://localhost:7000/example/GUID 其中 GUID 是当时登录的用户的 GUID。

我正在使用 WebPack。

我去了 react-router 文档：https://github.com/ReactTraining/react-router/blob/master/docs/guides/RouteMatching.md#path-syntax

但是由于某种原因这不起作用，也许我错过了一些东西。

这是我的反应路由器配置：

import React from 'react';
import { Router, Route, IndexRoute, browserHistory } from "react-router";
import Main from "../containers/main.js";
import Home from "../containers/home.js";
import Example from "../containers/exampleComponent.js";

var Routes = (
    <Router history={browserHistory}>
        <Route path="/" component={Main}>
            <IndexRoute component={Home} />
            <Route path="/example(/:guid)" component={Example} />
        </Route>
    </Router>
);

module.exports = Routes;

当我转到http://localhost:7000/example 时，它工作正常，它会加载示例组件。

但是当我转到http://localhost:7000/example/GUID 时，它不起作用。事实上，它不会加载任何东西。根据文档，路由路径中的“（）”表示它是可选的。

我还需要做些什么来完成这项工作吗？我一直在摸索这个……

编辑：请在此处查看我的 github 项目：https://github.com/FredM7/react-base 项目包含问题。

Answer 1

我也在使用这样的路径 path: 'cn/*/cid/(:catZeroId)(/:catOneId)(/:catTwoId)' 它对我来说完美无缺。

您可能遇到 react-router 版本问题，我正在使用 "react-router": "^3.0.0", "react-router-redux": "^4.0.6",

或者您可以创建https://jsbin.com/、https://plnkr.co/ 来模拟您的情况。