React Router with custom root and base component
I have an integrated React app (it's integrated into an existing Flask app) and writing to the React app is not in the site root. The first url that launches your React app is "/ active-items".
However, other routes do not necessarily extend this path. Some of the routes are "/ active-items / item /", while some are completely different, such as "/ item-selection".
With this in mind, I am trying to configure my React Router to provide a base component for each of these routes. Basically, any route that works should have an "App" component as its base component, and inside the application component I have "{props.children}".
I've tried a few iterations on how the routes should look like, but no luck.
My final iteration is this:
<Router>
<div>
<Route path='/' component={App}>
<Route path='active-items' component={ActiveItems} />
</Route>
</div>
</Router>
The app is displayed, but ActiveItems is not. Any ideas how I should approach this?
EDIT: I am using react-router-dom v4.0.0
source to share
Original Answer
There are many violations in version 4 of Router Router . ... You can no longer use nested routes. Check out this example of nested routes using the new version of 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 (Nov 16)
This is what I am actually doing.
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
source to share
I think you are misunderstanding how React-router works.
Nested routes are displayed "nested", which means that the parent routes will be displayed on their own, and then any child elements normally used for shared routes.
Here you have a working example that 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 displays the generic footer and then all nested children. All routes inside Root will be displayed in the footer as well.
I think you want something like this:
<Router>
<Route path='/' component={App} />
<Route path='/active-items' component={ActiveItems} />
</Router>
Check out www.facundolarocca.com to see how it works, you will also find a repo.
Let me know if it works.
source to share