Ask Please!! nested Router gives Warnings, but still working

[vianhanif]

trafficstars

Hi there... I am still new with routing in react. Just wanna ask. am i doing this right? So I have some features that each one has their own CRUD urls (like to see list, create new item, etc). But I am trying to seperate each feature to have its own main routes. So here's what I did to do it:

here's how i create url routes for feature called 'user' and 'member'

1. user-routes.jsx

import React, { Component } from 'react';
import {Router, Route, browserHistory, hashHistory} from 'react-router'
import {User} from 'pages'

class UserRoutes extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
          <Router history={browserHistory}>
            <Route path="/users" component={User.Home}/>
          </Router>
        );
    }
}

export default UserRoutes;

2. member-routes.jsx

import React, { Component } from 'react';
import {Router, Route, browserHistory, hashHistory} from 'react-router'
import {Member} from 'pages'

class MemberRoutes extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
          <Router history={browserHistory}>
            <Route path="/members" component={Member.Home}/>
          </Router>
        );
    }
}

export default MemberRoutes;

and I create a main route to combine those routes with this 3. main-route.jsx

import React, { Component } from 'react';
import {Router, Route, browserHistory} from 'react-router'
import {ContainerApp} from 'containers'
import {
  MemberRoutes,
  UserRoutes
} from './apps/_routes'

class MainRoute extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Router history={browserHistory}>
              <Route path="/" component={ContainerApp}>
                <Route path="/members" component={MemberRoutes}/>
                <Route path="/users" component={UserRoutes}/>
              </Route>
            </Router>
        );
    }
}

export default MainRoute;

And every time I click a link, it will be handled from the main-route, but it keeps giving this error whenever I click the links

I still thinks it won't harm me any further, but I can't ignore it. Any response would be really great~

[ghostsquad]

You only need the router at the top level. Keep the routes in the sub-components, just remove the router.