I have multiple layouts that should include different screens. Each layout has its own header, footer, and other things similar pages should share. Here is the code I came up with:
<BrowserRouter>
<Route path={['/index', '/about']} component={BaseLayout}>
<Route path="/index" component={Index} />
<Route path="/about" component={About} />
</Route>
<Route path={['/sign-in', '/sign-up']} component={AuthLayout}>
<Route path="/sign-in" component={SignIn} />
<Route path="/sign-up" component={SignUp} />
</Route>
<Route path={['/stats'} component={DashboardLayout}>
<Route path="/stats" component={Stats} />
</Route>
</BrowserRouter>
The code above obviously won't work because:
Warning: You should not use <Route component> and in
the same route; <Route component> will be ignored
Answers to similar questions on SO suggest to use wrapper components directly:
<BrowserRouter>
<BaseLayout>
<Route path="/index" component={Index} />
<Route path="/about" component={About} />
</BaseLayout>
<AuthLayout>
<Route path="/sign-in" component={SignIn} />
<Route path="/sign-up" component={SignUp} />
</AuthLayout>
<DashboardLayout>
<Route path="/stats" component={Stats} />
</DashboardLayout>
</BrowserRouter>
Problem with this approach is that even that it renders a single screen, it also renders elements from the other layouts, i.e. if you're on the index page rendered inside the BaseLayout, you will see elements from the AuthLayout and DashboardLayout too. Which kinda makes sense because they are not wrapped in a Route.
Some people suggested to grab the content of all layouts and add them as siblings to the current Routes. However this is a mess to me. I do want to keep all layouts in separate files and only pass screens as children to them.
This is a rough draft of a potential layout structure:
<Header>
<Route>
<Route path={['/index', '/about']} component={HeaderComponent} />
<Route path={['/sign-in', '/sign-up']} component={AuthHeaderComponent} />
</Route>
</Header>
<Screens>
<Route>
<Route path="/index" component={BaseLayout(Index)} />
<Route path="/about" component={BaseLayout(About)} />
<Route path="/sign-in" component={AuthLayout(SignIn)} />
<Route path="/sign-up" component={AuthLayout(SignUp)} />
<Route path="/stats" component={DashboardLayout(Stats)} />
</Route>
</Screens>
<Footer>
<FooterComponent />
</Footer>
In this example the wrappers are HOCs so they can handle passing all props from the route down to the page component, but if you just wanted to do an inline wrapper you could use the render function:
<Route
path="/index"
render={routeProps => {
return (
<BaseLayout>
<Index {...routeProps}/>
</BaseLayout>
);
}}
/>
[edit] A sample Layout HOC (docs)
const withBaseLayout = WrappedComponent => {
// any business logic required for the layout
// layoutProps, style, etc...
return (
<BaseLayout {...layoutProps}>
<WrappedComponent {...this.props} /> // these are all the passed in props
// you can inject more props into Wrapped component as well
// i.e. redux's connect or react-router-dom's withRouter HOCs
</BaseLayout>
);
}
// in index.js
export default withBaseLayout(Index);
// in route
<Route path="/index" component={Index} /> // already wrapped
Or directly as Component
const BaseLayoutHOC = WrappedComponent => {
// any business logic required for the layout
// layoutProps, style, etc...
return (
<BaseLayout {...layoutProps}>
<WrappedComponent {...this.props} />
</BaseLayout>
);
}
// in route
<Route path="/index" component={BaseLayoutHOC(Index)} />
Related
I am using react-router#6, and want to add a route for 404 pages, and render the page outside the main layout. This is what I have so far:
<BrowserRouter>
<Routes>
<Route path='/' element={<Layout />}>
<Route
path='/'
element={<HomePage />}
/>
<Route
path='login'
element={<LoginPage />}
/>
</Route>
<Route
path='*'
element={<PageNotFound />}
/>
</Routes>
</BrowserRouter>
The "*" route works fine, PageNotFound component is rendering outside the layout, as it should. Problem is that the any of the other routes does not show up, only the layout.
What am I missing?
From what you describe it sounds like the Layout component is missing rendering an Outlet component for the nested routes to render their content into.
Example:
import { Outlet } from 'react-router-dom';
const Layout = () => {
...
return (
<>
... common layout UI ...
<Outlet /> // <-- nested routes render out here
</>
);
};
<BrowserRouter>
<Routes>
<Route element={<Layout />}>
<Route path='/' element={<HomePage />} />
<Route path='login' element={<LoginPage />} />
</Route>
<Route path='*' element={<PageNotFound />} />
</Routes>
</BrowserRouter>
For more details you can see the following:
Layout Routes
Outlets
I try to send a data called favProduct to Favourites component. When I send the data, I get undefined. How can I send a data when I use react route?
const [favProduct, setFavProduct] = useState([1,2,3,4,5]);
return (
<Router>
<div className="App">
<Header />
<Switch>
<Route path="/" exact component={Home}/>
<Route path="/men" component={Men} />
<Route path="/women" component={Women} />
<Route path="/kids" component={Kids} />
<Route path="/productBuy" component={ProductBuy} />
<Route path="/favourites" component={Favourites} />
<Route path="/cart" component={Cart} />
<Route path="/checkout" component={Checkout} />
<Route path="/addproduct" component={AddProduct} />
</Switch>
<Footer />
</div>
</Router>
);
}
If you want, or need, to send additional props to routed components, use the Route's render prop to inject the props and forward the route props.
Example:
<Route
path="/favourites"
render={props => <Favourites {...props} favProduct={favProduct} />}
/>
Access all the route props as done previously, i.e. props.location, props.history, etc... and access the new prop that was passed, i.e. props.favProduct.
If using react-router v6+, in your route, try this:
<Route path="/favourites" element={<Favourites favProduct={favProduct} />} />
This is the my App() function in App.js, the comps :"Sidebar, Feed and Widgets" keeps rendering in route ="/" and also ="/login" as well, in addition to that "Login" comp didn't even render in route ="/login".
<Router>
<div className="app">
<Switch>
<Route path="/">
<Sidebar />
<Feed />
<Widgets />
</Route>
<Route path="/login">
<Login />
</Route>
</Switch>
</div>
</Router>
If you are using the latest version of react-router-dom, you must change the Switch to Routes
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import { Sidebar, Feed, Widgets } from '...'
const Home = () => {
return (
<Sidebar />
<Feed />
<Widgets />
)
}
const App = () => {
return (
<Router>
<div className="app">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
</Routes>
</div>
</Router>
)
}
You need to add exact with "/'" route.
In your case when you are not adding exact, React router will match '/login' path with the first path '/' and will render accordingly without checking next routes. By adding exact, first '/' will not match and it will match with second route '/login'.
<Router>
<div className="app">
<Switch>
<Route path="/" exact>
<Sidebar />
<Feed />
<Widgets />
</Route>
<Route path="/login">
<Login />
</Route>
</Switch>
</div>
</Router>
For more information, you can also refer this similar question: React : difference between <Route exact path="/" /> and <Route path="/" />
The Switch component exclusively matches and renders routes, so only 1 route can ever be matched. You've an issue with the order of your routes though, so only the "/" path matches since it's earlier and is rendered. The route for "/login" can never be reached, as-is.
In other words, this means is that when the path is "/login" that "/" still matches it and is the route rendered. In react-router-dom v5 think of the path props as a "path prefix".
In the Switch component, path order and specificity matter! You should order the paths from more specific to less specific. This allows more specific paths like "/login" to be matched before trying the less specific paths.
<Router>
<div className="app">
<Switch>
<Route path="/login">
<Login />
</Route>
<Route path="/">
<Sidebar />
<Feed />
<Widgets />
</Route>
</Switch>
</div>
</Router>
I have an application with a Login page followed by a Dashboard page. The routes that I've defined in the index.js are like this:
<Router>
<div>
<Route exact path="/" component={Login}/>
<Route path="/dashboard" component={Dashboard} />
</div>
</Router>
Dashboard.js:
return (
<div>
<Header/>
<Footer/>
<Switch>
<Route path="/dashboard/content1" component={content1} />
<Route path="/dashboard/content2" component={content2} />
</Switch>
</div>
);
The Dashboard component is rendering 3 of its child components. Header, Footer and Content1. I want the Dashboard component to render Content1 by default (i.e. when the url is /dashboard) and also when the url is /dashboard/content1, and should render content2 when the url is /dashboard/content2. Header & Footer components should remain. Please suggest the configuration for the Dashboard component to achieve the same.
In React-router v4 you provide Routes within the component, so you can write your Routes as follows
<Router>
<div>
<Route exact path="/" component={Login}/>
<Route path="/dashboard" component={Dashboard} />
</div>
</Router>
and then in the Dashboard Component render method
render() {
return (
<div>
{/* other content */}
<Switch>
<Route exact path="/dashboard" component={content1} />
<Route path="/dashboard/content1" component={content1} />
<Route path="/dashboard/content2" component={content2} />
</Switch>
</div>
)
}
As a variant of an answer to your post before you have edited it, you can do it (nesting) like this:
<Router>
<Header/>
<Content1/>
<Footer/>
<Switch>
<Route exact path="/" component={Login}/>
<Route exact path="/dashboard" component={Dashboard} />
<Route exact path="/dashboard/content1" component={content1} />
<Route exact path="/dashboard/content2" component={content2} />
</Switch>
</Router>
React-Router's Switch component renders the first thing that matches,
so if you put a route without a path last, it will render that if no other routes match, essentially treating it as a default. Like so:
return (
<div>
<Header/>
<Footer/>
<Switch>
<Route path="/dashboard/content2" exact component={Content2} />
<Route component={Content1} />
</Switch>
</div>
);
I have found that rendering a component instead of a Route also works, although I dont know if it's officially supported.
return (
<div>
<Header/>
<Footer/>
<Switch>
<Route path="/dashboard/content2" exact component={Content2} />
<Content1 />
</Switch>
</div>
);
In React Router I have a nested Route
<Route path='about' component={{main: About, header: Header}}>
<Route path='team' component={Team} />
</Route>
So now it shows Team when I go to /about/team.
But how do I set which Component to be seen when I visit /about?
I have tried
<Route path='about' component={{main: About, header: Header}}>
<IndexRoute component={AboutIndex} />
<Route path='team' component={Team} />
</Route>
and
<Route path='about' component={{main: About, header: Header}}>
<Route path='/' component={AboutIndex} />
<Route path='team' component={Team} />
</Route>
but it doesn't work.
My About component looks like this
class About extends React.Component {
render () {
return (
<div>
<div className='row'>
<div className='col-md-9'>
{this.props.children}
</div>
<div className='col-md-3'>
<ul className='nav nav-pills nav-stacked'>
<li className='nav-item'><IndexLink className='nav-link' to='/about' activeClassName='active'>About</IndexLink></li>
<li className='nav-item'><Link className='nav-link' to='/about/team'>Team</Link></li>
</ul>
</div>
</div>
</div>
);
}
}
REACT ROUTER 4 UPDATE
The default route is the one without a path.
import BrowserRouter from 'react-router-dom/BrowserRouter';
import Switch from 'react-router-dom/Switch';
import Route from 'react-router-dom/Route';
<BrowserRouter>
<Switch>
<Route exact path='/about' component={AboutIndex} />
<Route component={AboutIndex} /> // <--- don't add a path for a default route
</Switch>
</BrowserRouter>
If you don't need this object {main: About, header: Header} in your component, then just put AboutIndex in the component attribute. That should work
<Router history={browserHistory}>
<Route path='about' component={AboutIndex}>
<IndexRoute component={AboutIndex} />
<Route path='team' component={Team} />
</Route>
</Router>
If you still need main and header components, just add them in as either parent, child, or sibling components depending on your needs
React Router v6
The route has an attribute index which is used to define the index route as per the docs.
<Route index element={<DefaultPage />} />
Another way to do I found is to use the Navigate component of the react-router-dom package with the index attribute. After the a user navigates to the support route, it will default to the about page in the following example.
<Route path="support/*" element={<Support />}>
<Route index element={<Navigate to="about" replace />} />
<Route path="about" element={<About />} />
<Route path="contact" element={<Contact/>} />
</Route>