Q:

React-router with tabs, how to set up routes

I have the following tabs set up in the AdministratorComponent component of my app.  I am struggling with routes.  I would like the route https://example.com/xyz/publish/create_news_item to go to the Publish tab below, and and show the <CreateNewsItem />  component. And the https://example.com/xyz/publish/index should go to the Publish tab below, and show the <PublishIndex /> component.
        <div className="container">

            <ul className="nav nav-tabs">
                <li className="active"><a data-toggle="tab" href="#menu1">Menu1</a></li>
                <li><a data-toggle="tab" href="#publish">Publish</a></li>
                <li><a data-toggle="tab" href="#analytics">Analytics</a></li>
            </ul>

            <div className="tab-content">
                <div id="menu1" className="tab-pane fade">
                  <h3>Menu 1</h3>
                  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
                <div id="publish" className="tab-pane fade">

                </div>
                <div id="analytics" className="tab-pane fade">
                  <Analytics />
                  </div>
            </div>
        </div>

        <div>
            {this.props.children}
        </div>
    </div>

Here are the routes I have so far:
export default (
  <Route path=“/xyz/index" component={AdministratorComponent} >
    <Route path=“/xyz/create_news_publication" component={AdministratorComponent} />
  </Route>

);
This does not work.  I thought maybe I would put code into the AdministratorComponent which would look at the window.location.href, activate the Publish tab, and put in either <PublishIndex /> or <CreateNewsItem />  depending on the path.  But I can’t get started as the above path in the url just causes a bunch of 404s.  What is the correct way to do this?

A:

<Route path="/">
    <Route path="/index" component={AdministratorComponent}/>
    <Route path="/create_news_publication" component={AdministratorComponent}/>
</Route>

would be in routes.js for exemple. The component Route come from react-router
To switch route, you would need to use the component Link from react-router
To have a text (for exemple) linking to another page it would be like this :
<Link to={`/create_news_publication`}>click to go to create_news_publication!</Link>

