CODEWITHSUNDEEP
reactjstabsroutesreact-router
dt1000
dt1000

Reputation: 3732

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?

Upvotes: 0

Views: 3875

Answers (1)

Alexandre Rivest
Alexandre Rivest

Reputation: 694

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

Upvotes: 2

Related Questions