React Router with a custom root and a base component

4
votes

I have an integrated React app (it's integrated into an existing Flask app) and the entry to the React app is not on the site's root. The first URL that fires the React app is the '/active-items'.

However, other routes do not necessarily extend that path. Some of the routes are '/active-items/item/', while some are completely different, like '/item-selection'.

With that in mind, I'm trying to set up my React Router to provide a base component for each of those routes. Basically, any route that fires should have the 'App' component as the base component, and inside App component I have '{props.children}'.

I've tried several iterations of how the routes should look like, but with no luck.

My latest iteration is this:

<Router>
  <div>
    <Route path='/' component={App}>
      <Route path='active-items' component={ActiveItems} />
    </Route>
  </div>
</Router>

App is rendered, but ActiveItems is not. Any ideas how should I approach this?

EDIT: I'm using react-router-dom v4.0.0

2
reactjsreact-routerreact-router-dom
Why are you wrapping your routes with a div component? What version of React Router are you using? – Rafael Berro
Nested routes means that you will render them nested, so in your case you have to have one route for '/' and another one for '/active-items'. Take a look to the React-router docs. And remove div tags – Facundo La Rocca
@RafaelBerro I'm using "react-router-dom": "^4.0.0". There's a div in there because at one point I've tried rendering them side by side and it couldn't work unless they were wrapped. I followed this tutorial: reacttraining.com/react-router/web/guides/quick-start – dnmh
You should read the official documentation and check the changes. You can't define nested routes this way anymore. – Rafael Berro
@FacundoLaRocca I've been through the docs (link inside the github page you linked) and there is a div in their example as well. – dnmh

2 Answers

7
votes

Original Answer

The version 4 of the React Router has a lot of breaking changes. You can't use nested routes this way anymore. Check out this example of nested routes using the new version of the React Router.

const Header = () => (
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
    </ul>
  </nav>
)

const Footer = () => (
  <footer>
    Copyrights
  </footer>
)

const Layout = props => (
  <div className="layout">
    <div className="layout__container">
      <Header />{ props.children }
      <Footer />
    </div>
  </div>
)

const Home = () => <Layout>This is the home page.</Layout>
const About = () => <Layout>This is the about page.</Layout>

<Router>
  <div>
    <Route path="/" component={Home} />
    <Route path="/about" component={About} />
  </div>
</Router>

Hope it helps.

Updated Answer (November, 16th)

This is what I'm doing actually.

import { BrowserRouter, Route, Switch } from 'react-router-dom'
import React from 'react'

import About from './components/views/About'
import Home from './components/views/Home'
import Layout from './components/views/Layout'

const Routes = () => (
  <BrowserRouter>
    <Layout>
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/about' component={About} />
      </Switch>
    </Layout>
  </BrowserRouter>
)

export default Routes
0
votes

I think you are misunderstanding the way React-router works.

Nested routes are rendered "Nested", that means that parent routes will renders itself and then all childs, usually used for common routes.

Here you have a working example I am using right now:

<Router history={browserHistory}>
  <Route path='/' component={Root}>
    <Route path='/examples/react-redux-websocket' component={App} />
    <Route path='/examples/react-redux-websocket/chat/:chatid/participant/:participantid' component={Chat} />
    <Route path='/examples/react-redux-websocket/chat/:chatid' component={Chat} />
    <Route path='/*' component={NoMatch} />
  </Route>
</Router>

class Root extends Component {
  render () {
    return (
      <div>
        {this.props.children}
        <Footer />
      </div>
    )
  }
}

As you can see, Root route render a common Footer and then all nested childs. All routes inside the Root one will render the same footer as well.

I think what you need is something like that:

<Router>
  <Route path='/' component={App} />
  <Route path='/active-items' component={ActiveItems} />
</Router>

Check out www.facundolarocca.com to see it working, you will find the repo too.

Let me know if it works.