CODEWITHSUNDEEP
reactjsreact-router
Reyraa
Reyraa

Reputation: 4274

Nested route with a fixed component

In the below routing:

const Main = props => (
  <main className=''>
    <Account {...props.account}></Account>
    <Route path="/tab1" component={Tab1}/>
    <Route path="/tab2" component={Tab2}/>
  </main>
);

const App = (props) => {
  const state = props.store.getState();
  return (
    <Router history={browserHistory}>
      <section >
        <Route path="/main" render={() => (<Main account={state.account} />)} />
        <Route path="/login" component={Login} />

        <Link to='/login'>Login</Link>
        <Link to='/main/tab1'>Tab1</Link>
        <Link to='/main/tab2'>Tab2</Link>
      </section>
    </Router>
  );
};

I want to have the Account component above other components (tabs). Tabs will load based on their route but Account is always there, except in /login page.

But what I get is:

May questions are:

Thank you

Upvotes: 0

Views: 60

Answers (1)

trixn
trixn

Reputation: 16309

Your routes in the component point to /tab1 and /tab2 but your url is /main/tab1 or /main/tab2. You have to prefix them with /main. This doesn't happen automatically. One way would be to pass your match object to your Main component and prefix your path with a template string, this is better than hardcoding it in case you change your url to the Main component:

const Main = props => (
  <main className=''>
    <Account {...props.account}></Account>
    <Route path={`${props.match.url}/tab1`} component={Tab1}/>
    <Route path={`${props.match.url}/tab2`} component={Tab2}/>
  </main>
);

const App = (props) => {
  const state = props.store.getState();
  return (
    <Router history={browserHistory}>
      <section >
        <Route path="/main" render={({match}) => (<Main match={match} account={state.account} />)} />
        <Route path="/login" component={Login} />

        <Link to='/login'>Login</Link>
        <Link to='/main/tab1'>Tab1</Link>
        <Link to='/main/tab2'>Tab2</Link>
      </section>
    </Router>
  );
};

Upvotes: 1

Related Questions