Navigating to optional parameters with React Router

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:

  <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>

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.

Source: stackoverflow-javascript

Cannot read property ‘location’ of undefined at new Router

So I have a pretty basic setup for my index.js file, where all my routes are held. I’m getting the above TypeError from the console, but I’m unsure as to why. Below is my code:

const React = require('react');
const ReactDOM = require('react-dom');

// React router goodies
import { Router, Route, browserHistory, IndexRoute, hashHistory } from 'react-router';

const App = require('./components/App.jsx');

  <Router history = {browserHistory}> 
    <Route path="/" component={App}>

Source: stackoverflow-javascript

setState(…): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op

I’m getting this error when I navigate to other pages, reading through some of the other answers I have added this.onChange = this.onChange.bind(this); to the constructor but I still get the error.

Do I need to add a componentWillMount/componentWillUnmount lifecycle method to the onChange() ?

import React from 'react';
import Header from './header';
import Form from './form';
export default class Home extends React.Component {

constructor() {

this.onChange = this.onChange.bind(this);
this.state = {
  text: "kkdnsdkond",


onChange() {
 this.setState( {
  text: "this is a new title"

render() {

if(!this.state.text) {
} const title = "Welcome Tom"; console.log(this.props); return (


<Header name={"name passed to header component"} title={title} /> <Form /> </div> ); } } Source: stackoverflow-javascript