首页 文章

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

提问于
浏览 次
1

我正在使用react和react-router . 在我的react路由器配置中，我想添加一个接受以下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时，它不起作用 . 实际上，它不会加载任何东西 . 根据文档，路径路径中的"()"表示它是可选的 .

还有什么我需要做才能使这项工作？我一直在摸着这个......

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

reactjs webpack react-router

2 回答

  • 1

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

    你可能有反应路由器版本问题，我正在使用 "react-router": "^3.0.0", "react-router-redux": "^4.0.6",

    或者您可以创建https://jsbin.com/，https://plnkr.co/来模拟您的案例 .

    回复于
  • 0

    我打算说你需要添加一个

    <base href="/">

    标记在基本HTML页面的head标记内 .

    但我只看了你的代码，你已经做到了 .

    回复于

相关问题