Nested routes inside react component

Question

I'am searching for this but i couldn't find a proper answer. Is it possible to use React Router like this inside React Component;

import { Route, Switch } from 'react-router'    
import LandingLayout from '../../layouts/landing/LandingLayout'
import AppLayout from '../../layouts/app/AppLayout'

<Switch>
  <LandingLayout>
    <Route path="/" exact="true" component={Home} />
    <Route path='/login' component={Login} />
    <Route path='/signup' component={Signup} />
  </LandingLayout>
  <AppLayout>
    <Route path='/dashboard' component={DashboardPage} />
    <Route path='/users' component={UserList} />
    <Route path='/u/:username' component={AccountPage} />
  </AppLayout>
  <Route component={NotFound} />
</Switch>

First of all, at "/dashboard" or "/users" route the page comes with Landing Layout, it must render App Layout and content section in the middle empty. But at "/" home or login page it renders correctly. — Erdal SATIK
– Erdal SATIK, Commented Apr 1, 2018 at 6:16
Also server.js logs this. Warning: Failed prop type: Invalid prop exact of type string supplied to Route, expected boolean. in Route in Routes in Router in StaticRouter in Provider in LocaleProvider — Erdal SATIK
– Erdal SATIK, Commented Apr 1, 2018 at 6:18

Shubham Khatri · Accepted Answer · 2018-04-01 06:21:55Z

1

Switch only works with Route and since you render LandingLayout and AppLayout without Route, both of them will be rendered defaultly and while its ok to add the Routes as Child Routes, its better if you add them inside the component and since you want to have the LandingLayout and AppLayout render separately you would have to write them as routes

import { Route, Switch } from 'react-router'    
import LandingLayout from '../../layouts/landing/LandingLayout'
import AppLayout from '../../layouts/app/AppLayout'

<Switch>
  <Route path="/landing" component={LandingLayout}/> 
  <Route path="/app" component={AppLayout} />
  <Route component={NotFound} />
</Switch>

LandingLayout

render() {
   return (
       <div>
          {/* other things*/}
          <Route path={this.props.match.path} exact="true" component={Home} />
          <Route path={`${this.props.match.path}/login`} component={Login} />
          <Route path={`${this.props.match.path}/signup`} component={Signup} />
       </div>
   )
}

AppLayout

render() {
   return (
       <div>
          {/* other things*/}
          <Route path={`${this.props.match.path}/dashboard`} exact="true" component={DashboardPage} />
          <Route path={`${this.props.match.path}/users`} component={Login} />
          <Route path={`${this.props.match.path}/u/:username`} component={AccountPage} />
       </div>
   )
}

answered Apr 1, 2018 at 6:21

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

forJ Over a year ago

Do note that this.props.match.url is recommended for Links. Sometimes people use this.props.match.path for both Route and Link

Erdal SATIK Over a year ago

Thank you for alternatives but this is not the appropriate solution. I can not use routes like "/landing/home" or "/landing/login".

Erdal SATIK Over a year ago

Routes must be like these; “/“ “/login” “/signup” “/dashboard” “/users“ And so on..

Erdal SATIK Over a year ago

Basically i want to use 2 master layouts (views). One for landing page, the other one for app. How can i achieve this.

Erdal SATIK · Accepted Answer · 2018-04-03 11:21:48Z

After lots of research i got the right answer for my case.

First of all my React application is a server rendered app. Second; i am using React Router Switch because of performance related issues.

Above solution not worked for me because of my app architecture and i got some errors like;

You should not use Route component and Route children in the same route; Route children will be ignored

So here; i want to use React Router Switch with multiple layouts. And here is how to do it.

First you will create a custom Router component which combines the Layout and Component. Say "AppRouter"

const AppRouter = ({ component: Component, layout: Layout, ...rest }) => (
   <Route {...rest} render={props => (
     <Layout>
       <Component {...props} />
     </Layout>
   )} />
)

Second; for public and private routes there must be two different layout wrapper

const LandingRouteLayout = props => (
  <div>
    <LandingLayout {...props}/>
  </div>
)

const AppRouteLayout = props => (
 <div>
   <AppLayout {...props}/>
 </div>
)

Last; Routes

const Routes = () => {
  return (
    <Switch>
      <AppRoute exact path="/" layout={LandingRouteLayout} component={Home} />
      <AppRoute path="/login" layout={LandingRouteLayout} component={Login} />
      <AppRoute path="/signup" layout={LandingRouteLayout} component={Signup} />
      <AppRoute path="/t/:token" layout={AppRouteLayout} component={SetToken} />
      <AppRoute path='/dashboard' layout={AppRouteLayout} component={DashboardPage} />
      <AppRoute path="/u/:username" layout={AppRouteLayout} component={AccountPage} />
      <Route component={NotFound} />
    </Switch>
  )
}

Collectives™ on Stack Overflow

Nested routes inside react component

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related