Navigating to optional parameters with React Router

Question

I am trying to make optional sub routes with my React Router but no matter what I search I can't seem to find a solution that works for me !

I tried every solution mentioned in this answer: React Router with optional path parameter - nothing worked.

So I have the following in one file:

render(
  <Provider store={store}>
    <Router history={browserHistory} routes={routes} />
  </Provider> , document.getElementById('app')
  );

and then:

 export default (
   <Router history={browserHistory}>
     <Route path={'/'} component ={ApplicationHomePageContainer}></Route>
     <Route path={'/home'} component ={UserHomePageContainer}></Route>
     <Route path={'/circle(/:path)'} component ={CirclePageContainer}></Route>
    </Router>
 )

I have tried many many different approaches, but whatever I seem to do, the route /circle/whatever never renders anything. All other work perfectly fine.

I am using React router version 2.8.3, I tried to upgrade to version 3 but that did not solve the issue.

score 0 · Answer 1 · answered Mar 20 '17 at 08:40

I dont know if its good but this is how I do it :

<Router history={browserHistory}>
    <Route path={'/circle'} component ={CirclePageContainer}></Route>
    <Route path={'/circle/:path'} component ={CirclePageContainer}></Route>
</Router>

Then I let the CirclePageContainer component handle the scenario when there is no parameter

score 0 · Answer 2 · answered Mar 20 '17 at 09:38

Well I found out what I was doing wrong.

So I had this on my backend:

server.get('/*', function(req, res, next) {
res.sendFile('index.html', { root: __dirname });
});

And I only had to change my html folder from:

<script src="/bundle.js"></script>

to

<script src="/bundle.js"></script>

Navigating to optional parameters with React Router

2 Answers2