Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Multiple Layouts with React Router v4

I'm pulling my hair out trying to render multiple layouts with React Router v4.

For instance, I'd like pages with the following paths to have layout 1:

  • exact path="/"
  • path="/blog"
  • path="/about"
  • path="/projects"

and the following paths to have layout 2:

  • path="/blog/:id
  • path="/project/:id

Effectively what's being answered here but for v4: Using multiple layouts for react-router components

like image 590
redstripepapi Avatar asked Apr 10 '17 22:04

redstripepapi


People also ask

How do I use multiple layouts in next JS?

If you need multiple layouts, you can add a property getLayout to your page, allowing you to return a React component for the layout. This allows you to define the layout on a per-page basis. Since we're returning a function, we can have complex nested layouts if desired.

Does react router allows for nested routes?

With React Router, you have two options for creating nested routes. The first is using the /* with nested <Routes> pattern and the second is using the <Outlet /> pattern.


1 Answers

None of the other answers worked so I came up with the following solution. I used the render prop instead of the traditional component prop at the highest level.

It uses the layoutPicker function to determine the layout based on the path. If that path isn't assigned to a layout then it returns a "bad route" message.

import SimpleLayout from './layouts/simple-layout';
import FullLayout from './layouts/full-layout';

var layoutAssignments = {
  '/': FullLayout,
  '/pricing': FullLayout,
  '/signup': SimpleLayout,
  '/login': SimpleLayout
}

var layoutPicker = function(props){
  var Layout = layoutAssignments[props.location.pathname];
  return Layout ? <Layout/> : <pre>bad route</pre>;
};

class Main extends React.Component {
  render(){
    return (
      <Router>
        <Route path="*" render={layoutPicker}/>
      </Router>
    );
  }
}


simple-layout.js and full-layout.js follow this format:

class SimpleLayout extends React.Component {
  render(){
    return (
      <div>
        <Route path="/signup" component={SignupPage}/>
        <Route path="/login" component={LoginPage}/>
      </div>
    );
  }
}
like image 68
spencer.sm Avatar answered Sep 23 '22 19:09

spencer.sm