I'm getting this warning in React app:
You rendered descendant <Routes (or called `useRoutes()`) at "/" (under <Route path="/">)
but the parent route path has no trailing "*". This means if you navigate deeper,
the parent won't match anymore and therefore the child routes will never render.
Please change the parent <Route path="/"> to <Route path="*">.
Here is my code:
<Router>
<Routes>
<Route exact path="/login" element={<Login />} />
<Route exact path="/" element={<AppBody />} >
<Route exact path="/add-edit-profile" element={<PageContent />} />
<Route exact path="/profile-list" element={<ProfileList />} />
</Route>
</Routes>
</Router>
AppBody.js:
<Sidebar/>
<div className='page-content'>
<Header />
</div>
<Routes>
<Route exact path="/add-edit-profile" element={<PageContent />} />
<Route exact path="/profile-list" element={<ProfileList />} />
</Routes>
What I've to change in my code to fix the warning?
It means that AppBody is rendering more deeply nested routes and the path needs to specify the wildcard * character to indicate it can match more generic/nested paths. react-router-dom route paths are always exactly matched, so if sub-routes are rendered the path needs to allow for them. Change path="/" to path="/*".
Since AppBody is rendering the routes and no Outlet for the nested Route components, they can be safely removed.
<Router>
<Routes>
<Route exact path="/login" element={<Login />} />
<Route exact path="/*" element={<AppBody />} > />
</Routes>
</Router>
Please am finding it difficult to create a route in react router
I want to create a route like this <Route path="/:storeId" component={StorePage} />
But I also have a route like this /stores
Any time I go to the /:storeId page it loads the /users page
Am just confuse
Here is the code
<Switch>
<ScrollToTop>
<MainLayout>
<Route exact path="/">
<Home />
</Route>
<Route exact path="/stores">
<Stores />
</Route>
<Route exact path="/:storeId">
<StorePage />
</Route>
</MainLayout>
</ScrollToTop>
</Switch>
Any help please.
You should do something like this
<Switch>
<Route exact path="/users">
<Users/>
</Route>
<Route path="/users/:id">
<UserById/>
</Route>
</Switch>
playing around with protected routes in React Router 4 and wondering whether something that I've been able to get to work is even possible.
<Switch>
<Route exact path="/" component={LandingPage} />
<Route path="/sign-in" component={SignIn} />
<Route exact path="/auth/home" component={Home} />
<Route exact path="/auth/my-profile" component={UserProfile} />
<ProtectedRoute path="/auth" />
</Switch>
I have these routes as shown above and I have set up a protected route called /auth
What I want is to use this to protect any and all routes starting with /auth
So in this example both
<Route exact path="/auth/home" component={Home} />
<Route exact path="/auth/my-profile" component={UserProfile} />
Would also be protected routes.
Make sense?
<Route path="news">
<IndexRoute component={News} />
<Route path=":id" component={NewsCard} />
</Route>
I want to access this route with url like /news-:id. How can I do it?
I do without nesting:
<Route path="news-:id" component={NewsCard} />
Can i do it differently?
With React-Router there is a nesting concept that makes it hard for me to imagine where I should inject my landing page.
For example:
<Route path="/" component={App}>
<Route path="login" component={Login} />
<Route path="logout" component={Logout} />
<Route path="about" component={About} />
<Route path="dashboard" component={Dashboard} onEnter={requireAuth} />
</Route>
In that example part of the top-level component is shared with the rest of the components.
But with a landing page, there might not be the parent-child relationship for you to fit it into the routing.
Ergo, how do you manage putting in a landing page when using react-router?
Ok, let me answer here then.
The way you could do it is pretty straight forward, I think, if I understood you correctly.
I would do something like:
<Route path='/' component={LandingPage}>
<Route path='app' component={App}>
<Route path="login" component={Login} />
<Route path="logout" component={Logout} />
<Route path="about" component={About} />
<Route path="dashboard" component={Dashboard} onEnter={requireAuth} />
</Route>
</Route>
and then only include this.props.children in your App component.
I couldn't get any of the above answers to work so I decided to just do it my way. Here is what I did:
<Route path="/">
<IndexRoute component={Landing}/>
<Route path="/" component={App}>
<Route path="login" component={LoginOrRegister} onEnter={redirectAuth}/>
<Route path="dashboard" component={Dashboard} onEnter={requireAuth}/>
<Route path="vote" component={Vote} onEnter={requireAuth}/>
<Route path="about" component={About}/>
</Route>
</Route>
The Main component contains the minimal required for both the landing page and the App itself. In my case, they share nothing so the component is simply a wrapping div.
const Main = ({children}) => {
return (
<div>
{children}
</div>
);
};
Ran into this with the latest version (v6) of react-router-dom which no longer supports IndexRoute. After trying a few different approaches, it turned out to be relatively simple to add to the final catch-all where we normally specify our 404 page...
<Switch>
<Route
path="/learn?"
component={Learn}
/>
<Private
path="/search?"
component={Search}
/>
<Route
component={match.isExact ? Landing : Lost}
/>
</Switch>
This is within a top-level Application component that handles the root (/) path so match.isExact means we're on the home page. Above and below the <Switch> you can render any elements present on every page (e.g. a header and footer).
Hope this helps anyone coming across this question in 2022 and beyond.
React-router V6 supports index as an attribute of Route component
Index Route - A child route with no path that renders in the parent's outlet at the parent's URL.
See docs https://reactrouter.com/docs/en/v6/getting-started/concepts under "Defining Route" heading.
<Route path="/" element={<App />}>
<Route index element={<Home />} />
<Route path="teams" element={<Teams />}>
<Route path=":teamId" element={<Team />} />
...
</Route>
</Route>
</Routes>```
The IndexRoute in React-Router lets you define the default component when reaching a portion of your application. So with the following code, if you go to "/", the page will render the App component and inject the LandingPage component into its props.children.
<Route path="/" component={App}>
<IndexRoute component={LandingPage} />
<Route path="login" component={Login} />
<Route path="logout" component={Logout} />
<Route path="about" component={About} />
<Route path="dashboard" component={Dashboard} onEnter={requireAuth} />
</Route>