How to add sub paths in react router - javascript

I have a index file where I have
<BrowserRouter>
<Routes>
<Route path="/" element={Home}
<Route path="/home/student/info" element={Info} />
<Route path="/home/student/about" element={about} />
<Route path="/home/teacher/score" element={score} />
<Route path="/home/teacher/attendence" element={attendence} />
</Routes>
</BrowserRouter>
Here, I have this common path for "/home/student/". So How can I use a react sub path for this, rather than writing separate lines? I'm using react-router 6.

You can use nested routes. Put routes as children of the route component. Don't forget that in RRDv6 the element prop takes a ReactNode, e.g. JSX, and not a reference to a React component like v5.
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="home">
<Route path="student">
<Route path="info" element={<Info />} />
<Route path="about" element={<About />} />
</Route>
<Route path="teacher">
<Route path="score" element={<Score />} />
<Route path="attendence" element={<Attendence />} />
</Route>
</Route>
</Routes>
</BrowserRouter>
You can read more about nested routes here.

Related

Please change the parent <Route path="/"> to <Route path="*">

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>

How to create a dynamic route in react with react 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>

Not found page and default home page always redirect to home - React Router

I have this code and always that I put a non existing route it redirects to home. I want that when a non existing route is enter redirects to /404 and when nothing or / is enter it redirects to Home.
<Switch>
<Route exact path="/badges" component={Badges} />
<Route exact path="/badges/new" component={NewBadge} />
<Route path="/404" component={NotFound} />
<Route path="/" component={Home} />
<Redirect from="*" to="/404" />
</Switch>
Use the exact prop in your Home route.
<Route exact path="/" component={Home} />
I think you can do this:
<Switch>
<Route exact path="/badges" component={Badges} />
<Route exact path="/badges/new" component={NewBadge} />
<Route exact path="/" component={Home} />
<Route component={NotFound} />
</Switch>
I would add a <Route> component without providing path that should redirect to 404 one.
Try the following:
<Switch>
<Route exact path="/badges" component={Badges} />
<Route exact path="/badges/new" component={NewBadge} />
<Route path="/404" component={NotFound} />
<Route path="/" component={Home} />
<Route component={NotFound} />
</Switch>
I hope this helps!

How to mimic DefaultRoute in React Router 1.0

So, switching to the latest React Router (1.0.0RC3). I have run into a piece of old functionality that I can't find how to replicate with the new 1.0 API.
In my Router, I always render a top-level App component, then a second-level Layout component, then a Page component. In the old React Router, I didn't have to put a path property on a Route, so I could "group" certain routes to have a parent component without adding another level to my url.
Below, you'll see that when hitting the / route, I try to load App, DefaultLayout, and Home. However, it won't render DefaultLayout without an explicit path property. So if I put path="app" on my default layout, it works, but I'm trying to not change my homepage route if possible.
I've tried leaving path off, putting an absolute path, using nested IndexRoutes (doesn't work). Is there still a way to do this in RR 1.0?
export const routes = (
<Router history={createBrowserHistory()}>
<Route path="/" component={App}>
<Route component={DefaultLayout}> // Requires `path` Here
<IndexRoute component={Home} />
<Route path="about" component={About} />
<Route path="contact" component={Contact} />
<Route path="careers" component={Careers} />
</Route>
<Route path="blog" component={BlogLayout}>
<IndexRoute component={BlogHome} />
<Route path="posts/:post_name" component={BlogPost} />
</Route>
</Route>
</Router>
);
If I understood you correctly, your routes should look like:
export const routes = (
<Router history={createBrowserHistory()}>
<Route component={App}>
<Route path="/" component={DefaultLayout}> // Requires `path` Here
<IndexRoute component={Home} />
<Route path="about" component={About} />
<Route path="contact" component={Contact} />
<Route path="careers" component={Careers} />
</Route>
<Route path="blog" component={BlogLayout}>
<IndexRoute component={BlogHome} />
<Route path="posts/:post_name" component={BlogPost} />
</Route>
</Route>
</Router>
);

React-Router: Adding in a landing page

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>

Categories