I need some help to accomplish routing in ReactJS.
I describe my problem and hope you can help me..
I have famous index.js in this file and I call app.js from it
**index.js**
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('app')
);
inside app.js I wrote some code for routing as below :
**App.js**
return (
<div>
{message &&
<div className={`alert ${type}`}>{message}</div>
}
<Router history={history}>
<div>
<PrivateRoute exact path="/" component={Main} />
<Route path="/login" component={SignIn} />
</div>
</Router>
</div>
);
this work correctly and after login I redirect to Main.js
and now my problem :
I`ve written some route in Main.js page that all other pages must inherit from that. I mean all other page must have the skeleton of Main.js
here is some code of Main.js
**Main.js**
<main className={classes.content}>
<Link to="/HomePage"> HomePage</Link>
<Link to="/Admin"> Admin </Link>
<Link to="/Menus"> Menu </Link>
<Link to="/Product"> Product </Link>
<div className={classes.appBarSpacer} />
<Switch>
<PrivateRoute path="/HomePage" component={HomePage} />
<PrivateRoute path="/Admin" component={Admin} />
<PrivateRoute path="/Menus" component={Menus} />
<PrivateRoute path="/Product" component={Product} />
</Switch>
</main>
unfortunately none of this routes works..
I`m extremely confused because all of things seems right
Issue
None of your nested paths are an exact match to "/" rendered by the PrivateRoute of the main router, so they are not rendered.
Solution
Place the parent routes in a Switch and reorder the routes so the "/login" path can be matched before the more general "/" path. Remove the exact prop from the "/" path.
App.js
return (
<div>
{message &&
<div className={`alert ${type}`}>{message}</div>
}
<Router history={history}>
<Switch>
<Route path="/login" component={SignIn} />
<PrivateRoute path="/" component={Main} />
</Switch>
</Router>
</div>
);
Main.js
<main className={classes.content}>
<Link to="/HomePage"> HomePage</Link>
<Link to="/Admin"> Admin </Link>
<Link to="/Menus"> Menu </Link>
<Link to="/Product"> Product </Link>
<div className={classes.appBarSpacer} />
<Switch>
<PrivateRoute path="/HomePage" component={HomePage} />
<PrivateRoute path="/Admin" component={Admin} />
<PrivateRoute path="/Menus" component={Menus} />
<PrivateRoute path="/Product" component={Product} />
</Switch>
</main>
Related
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>
);
};
Consider the Router :
<Router>
<Fragment>
<Navbar />
{/* <Landing /> */}
<Route exact path="/" component={Landing} />
<section className="containerSpecial">
<Alert />
<Switch>
<Route exact path="/register" component={Register} />
<Route exact path="/forgot-my-password" component={ForgotMyPassword}/>{" "}
<Route exact path="/reset-password" component={ResetPassword} />
<Route exact path="/login" component={Login} />
<PrivateRoute exact path="/dashboard" component={Dashboard} />{" "}
... More PrivateRoutes
// Another route that forwards to "NotFound" Component
</Switch>
</section>
</Fragment>
</Router>
When the user hits a url like http://localhost:3000/dashboard or any other url from the
listed above , is being forward to the corresponding component.
However when users hit http://localhost:3000/ddlksajldsajk or http://localhost:3000/dashboard1
nothing is being rendered.
How can I forward urls that are not listed to a NotFound component ?
just add <Route component={NoMatch} /> :
<Router>
<Fragment>
<Navbar />
{/* <Landing /> */}
<Route exact path="/" component={Landing} />
<section className="containerSpecial">
<Alert />
<Switch>
<Route exact path="/register" component={Register} />
<Route exact path="/forgot-my-password" component={ForgotMyPassword}/>{" "}
<Route exact path="/reset-password" component={ResetPassword} />
<Route exact path="/login" component={Login} />
<PrivateRoute exact path="/dashboard" component={Dashboard} />{" "}
... More PrivateRoutes
// Another route that forwards to "NotFound" Component
<Route component={NotFound} />
</Switch>
</section>
</Fragment>
</Router>
see react router handling 404 pages
Add a new route like this as the very last route:
<Route path='/' component={my404Component} />
Notice it does not have exact. Anything that hasn't been matched will match with it and send them to the 404.
How can I make Reacts Suspense not show any fallback but rather stay on the same page
This what I have
return (
<Router>
<Provider store={store}>
<Fragment>
<Switch>
<Layout>
<Suspense fallback={<BusyIndicator />} maxDuration={5000}>
<PrivateRoute
exact
path="/en/account/dashboard"
component={Home}
/>
<PrivateRoute exact path="/en/books" component={Books} />
<PrivateRoute
exact
path="/en/account/quiz"
component={Quiz}
/>
<PrivateRoute
exact
path="/en/account/quiz/:slug"
component={QuizDetail}
/>
<PrivateRoute
exact
path="/en/account/quiz/:slug/result"
component={QuizResult}
/>
<PrivateRoute
exact
path="/en/account/my-books"
component={MyBooks}
/>
<PrivateRoute
exact
path="/en/account/logout"
component={Logout}
/>
<RedirectRoute
exact
path="/en/register"
component={Register}
/>
<RedirectRoute exact path="/en/login" component={Login} />
</Suspense>
</Layout>
<Route component={NoMatch} />
</Switch>
</Fragment>
</Provider>
</Router>
);
What I want is for the page to render the same component it is on until it has fetched the next chunk, maybe with a top progress bar like youtube
#NduJay I think what you are looking for is a resolver. See https://www.npmjs.com/package/react-resolver
Basically the concept is that the next component won't render until the data requirements to show it have been met.
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>
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>
);