React Router - Route With Optional Params Not Working

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 = (
    
        
            
            
        
    
);

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.

Solved

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.

I was going to say you need to add a

tag inside the head tags of your base HTML page.

But I just looked at your code and you've already done that.