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>
);
Related
As I mentioned I have MUI Theme Provider with Layout which includes Dashboard, Order screens ...
When user hits '/' endpoint it should return Login Screen but Layout keeps showing itself.
-App.js
<ThemeProvider theme={theme}>
<Router>
<Layout>
<Switch>
<Route exact path="/">
<Login />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
<Route path="/orders">
<Orders />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/employees">
<Employee />
</Route>
</Switch>
</Layout>
</Router>
</ThemeProvider>
);
-Layout.js
...AppBar,Sidebar etc
<div style={{width:'100%'}}>
<div className={classes.toolbar}></div>
{children}
</div>
As-is, the code is unconditionally rendering a Layout component outside the Switch, so it's rendered regardless of the currently matched route.
If you want the Layout component to only render on certain routes, conditionally render it with those routes.
Example, render the Login component on exactly the "/" path, everything else into a route rendering the Layout and another Switch.
<ThemeProvider theme={theme}>
<Router>
<Switch>
<Route exact path="/">
<Login />
</Route>
<Route path="/">
<Layout>
<Switch>
<Route path="/dashboard">
<Dashboard />
</Route>
<Route path="/orders">
<Orders />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/employees">
<Employee />
</Route>
</Switch>
</Layout>
</Route>
</Switch>
</Router>
</ThemeProvider>
In my code, I want Header & Footer components to be rendered in all routes except '/login'so how to do that? How to hide component on a specific route?
const AppRouter = () => {
return (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route path="/login" component={Login} /> {/* I wanna render this route without Header & Footer */}
<Route path="/" component={Home} exact />
<Route path="/product" component={ProductOverview} />
<Route path="/profile" component={Profile} />
<Route component={NotFound} />
</Switch>
<Footer />
</div>
</BrowserRouter>
);
};
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)} />
I know this is been asked a few times, but nothing really seemed to apply to me.
I have this
App.js
<React.Fragment>
<Switch>
<Route path="/members" component={MemberAreaComponent} />
<Route exact path="/" component={NonMemberAreaComponent} />
<Route component={NotFoundComponent} />
</Switch>
</React.Fragment >
In members area component I have
// other html above here
<div className="main-area">
<main>
<Switch>
<Route path="/members/home" component={HomeComponent} />
</Switch>
</main>
</div>
NonMemberAreaComponent
<div className="non-members-area-container">
<Route path="/login" component={LoginComponent} />
<Route path="/" component={NonMemberHomeComponent} />
</div>
When I try to do /Login I keep getting my "NotFoundComponent". I think it is "exact" what is messing everything up.
Your second Route only matches when the path is exactly /. Remove the exact prop to make it active when / is just a part of the path.
<React.Fragment>
<Switch>
<Route path="/members" component={MemberAreaComponent} />
<Route path="/" component={NonMemberAreaComponent} />
<Route component={NotFoundComponent} />
</Switch>
</React.Fragment>
I'm trying to render NotFound component or redirect to root route using React router v4 when path is incorrect, but when I'm on "/" my app renders 2 components.
<Switch>
<Navbar>
<Route exact path="/" component={App} />
<Route path="/Other" component={Other} />
<Route component={NotFound} />
</Navbar>
</Switch>
and my Navbar looks like:
render()
{
return(
<div>
{/*Any content here*/}
{this.props.children}
</div>
);
}
If I replace <Route component={NotFound} /> to <Redirect to="/" /> it looks working, but I'm getting an error: Warning: You tried to redirect to the same route you're currently on: "/"
Thanks for your help! :)
The placement of your Switch component is incorrect, it should wrap the components children where Routes are defined
<Navbar>
<Switch>
<Route exact path="/" component={App} />
<Route path="/Other" component={Other} />
<Route component={NotFound} />
</Switch>
</Navbar>