React Router - Route With Optional Params Not Working

Question

I am using react and react-router. In my react router configuration, I want to add a route that will accept the following URL: http://localhost:7000/example/GUID where GUID is the user's GUID that is logged in at that moment.

I am using WebPack.

I went to the react-router documentation: https://github.com/ReactTraining/react-router/blob/master/docs/guides/RouteMatching.md#path-syntax

But that does not work for some reason, maybe I am missing something.

This is my react router configuration:

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;

When I go to http://localhost:7000/example, it works fine, it loads the example component.

But When I go to http://localhost:7000/example/GUID, it does not work. In fact, it does not load anything then. According to the documentation, the "()" in the route path indicates that it is optional.

Is there anything else that I need to do to make this work? I've been scratching my head on this one...

EDIT: Please see my github project here: https://github.com/FredM7/react-base The project includes the problem.

veetesh jain veetesh jain · Accepted Answer · 2016-12-23T07:36:54

i am also using path like this path: 'cn/*/cid/(:catZeroId)(/:catOneId)(/:catTwoId)' it works flawlessly for me.

you might be having react-router version issue, i am using "react-router": "^3.0.0", "react-router-redux": "^4.0.6",

or you can create https://jsbin.com/, https://plnkr.co/ to simulate your case.

React Router - Route With Optional Params Not Working

1 Answers