Develop Reference

React router dom does not redirect on the default child route [duplicate]

I just can't find a way to set a default route with react-router v6
Is it because it's not good programming anymore?
Can somebody tell me why?
Thanks in advance
Rafael

If I understand your question about a "default" route correctly then I am interpreting this as one of the following:
Use an index route:
You can wrap a set of routes in a layout route and specify an index route:
<Routes>
<Route path="/*">
<Route index element={<ComponentA />} />
<Route path="pathB" element={<ComponentB />} />
<Route path="pathC" element={<ComponentC />} />
</Route>
</Routes>
The index route is the route that will be matched and rendered when the path exactly matches the root parent route's path.
Redirect to a "default" route if no other routes match:
You can also render a redirect to the route you consider to be the "default" route.
<Routes>
<Route path="/pathA" element={<ComponentA />} />
<Route path="/pathB" element={<ComponentB />} />
<Route path="/pathC" element={<ComponentC />} />
<Route path="*" element={<Navigate to="/pathA" replace />} />
</Routes>

TLDR;
use <Route index element={<Navigate to="/dashboard" />} />
index: default computed route.
<Navigate to="whatever you want"/>: is used to navigate to a another already declared path.
LR;
I found an easy way to redirect to a default component using index & Navigate combined.
In my situation I had used React Router V6.6.2 with:
createBrowserRouter(
createRoutesFromElements(...))
The routes look like this
/* All imports go here */
const router = createBrowserRouter(
createRoutesFromElements(
<Route element={<AuthLayout />}>
<Route element={<RrotectedLayout />}>
<Route path="/" element={<MainLayout />}>
<Route index element={<Navigate to="/dashboard" />} />
<Route path="dashboard" element={<Dashboard />} />
<Route path="projects" element={<Projects />} />
<Route path="users" element={<Users />} />
<Route path="notifications" element={<Notification />} />
<Route path="settings" element={<Settings />} />
<Route
path="*"
element={<Navigate to="/dashboard" replace={true} />}
/>
</Route>
</Route>
<Route path="/signup" element={<Signup />} />
<Route path="/login" element={<Login />} />
</Route>,
),
{},
)
export default function App() {
return (
<>
<RouterProvider router={router} />
</>
)
}
Now when you access your application, React router will figure out which index your application needs to point to, and since your index contains a Navigation to a specific path, you'll be redirect to that path by default. you don't need to specify a specific component (element) in this situation because you don't wanna loose the link to it.

I actually found the answer here but I just wanna share my solution if it helps someone with theirs.
You can set path='*' to make a default route. The index route deals a parent route ("/") but doesn't deal with routes which should otherwise return a 404 status.
if (!token) {
// This router will handle my public routes. Anything else is going to redirect to AuthPage without losing the previous route typed.
return (
<BrowserRouter>
<Routes>
{/* Auth */}
<Route path="/">
<Route exact path="recover" element={<UnknownPage />} />
// Default route
<Route path="*" element={<AuthPage setToken={setToken} />} />
</Route>
</Routes>
</BrowserRouter>
);
}
// This router is inside my application. Only logged users will get here.
return (
<BrowserRouter>
<Routes>
{/* My base page is just some fixed structure like Header, Sidebar and Footer. For this problem you can ignore it. */}
{/* BasePage */}
<Route path="/*" element={<BasePage logout={logout} />}>
{/* This is my specific users route */ }
{/* Users */}
<Route path="users">
<Route path="" element={<UsersPage />} />
<Route path=":id" element={<UserInfoPage />} />
</Route>
{/* Anything else is going to show this page. Even random words like: http:localhost:3000/anything-asdvasd */}
{/* Default Route */}
<Route path="*" element={<UnknownPage />} />
</Route>
</Routes>
</BrowserRouter>
);
Using parent routes like I used in my users routes makes it easier to scope your default routes.

If you are using createBrowserRouter you can set the default route in following way.
As per docs component loads children of parent. So
const router = createBrowserRouter([
{
path: "/",
element: <App />,
children: [
{
path: "/",
element: <Home />,
},
{
path: "/home",
element: <Home />,
},
],
},
],);

If you are using createBrowserRouter you can set the default route in following way.
const router = createBrowserRouter([
{
path: "/",
element: <RootLayout />,
children: [
{ index: true, element: <Navigate to="/calculation" replace /> },
{ path: "calculation", element: <Calculation /> },
{ path: "calendar", element: <Calendar /> },
{ path: "profile", element: <Profile /> },
],
},
]);

Changing from v5 to v6, how to make it work with relative paths?

My application has scenarios where we need several routes to "pass" through a component to only then render the specifics, not only that but also situations where something is shown for the "parent" route and then split for the children...
It is imperative to note that we don't have a single "route config" file, and instead our routes are where we need them.
This was possible with v5, but I am very confused about how to get this accomplished with the new version.
So, currently we have stuff such as:
App.js
function App = () => {
return (
<Switch>
<Route exact path={['/', '/2', '/more-info']} component={Login} />
<Route path="/(main|settings|notifications)" component={AuthenticatedUser} />
<Redirect from="*" to="/404" />
</Switch>
);
}
AuthenticatedUser.js
function AuthenticatedUser= () => {
{... lots of common code}
return (
<div>
{...common html}
<Switch>
<Route exact path="/main" component={Main} />
<Route path="/settings" component={Settings} />
<Route path="/notifications" component={Notifications} />
</Switch>
</div>
);
}
Settings.js
function Settings= () => {
{... lots of common code}
return (
<div>
{...common html}
<Switch>
<Route exact path="/settings/basic" component={Basic} />
<Route exact path="/settings/notifications" component={Notifications} />
</Switch>
</div>
);
}
Now, with the relative from the parent, I am not able to get the same structure, I am also confused about how to get the routes split into separate files not even talking about the regex situation that I am guessing the solution is to duplicate the lines as many times as I have items in that regex...

You have basically 2 options when it comes to declaring the routes and sharing common UI:
Use layout routes and nested Route components.
Render routed components that render descendent routes in another Routes component wrapping descendent Route components.
Using layout and nested routes
Convert AuthenticatedUser into a layout route. Layout routes render an Outlet for nested routes to render their matched element into.
import { Outlet } from 'react-router-dom';
function AuthenticatedUser = () => {
{... lots of common code}
return (
<div>
{...common html}
<Outlet />
</div>
);
};
Convert Settings also into a layout route component.
import { Outlet } from 'react-router-dom';
function Settings = () => {
{... lots of common code}
return (
<div>
{...common html}
<Outlet />
</div>
);
};
App
import { Routes, Route, Navigate } from 'react-router-dom';
function App = () => {
return (
<Routes>
<Route path="/" element={<Login />} />
<Route path="/2" element={<Login />} />
<Route path="/more-info" element={<Login />} />
<Route element={<AuthenticatedUser />}>
<Route path="/main" element={<Main />} />
<Route path="/settings" element={<Settings />}>
<Route
path="basic" // "/settings/basic"
element={<Basic />}
/>
<Route
path="notifications" // "/settings/notifications"
element={<Notifications />}
/>
</Route>
<Route path="/notifications" element={<Notifications />} />
</Route>
<Route path="*" element={<Navigate to="/404" replace />} />
</Routes>
);
};
Using descendent routes
Here the parent routes need to render their route path with a trailing "*" wildcard matcher so descendent routes can also be matched. Descendent Routes components build their route paths relative to their parent Route path. I'd still suggest using AuthenticatedUser as a layout route for ease, otherwise you'll have a lot of code duplication since you'd need to wrap each route individually.
App
import { Routes, Route, Navigate } from 'react-router-dom';
function App = () => {
return (
<Routes>
<Route path="/" element={<Login />} />
<Route path="/2" element={<Login />} />
<Route path="/more-info" element={<Login />} />
<Route element={<AuthenticatedUser />}>
<Route path="/main" element={<Main />} />
<Route path="/settings/*" element={<Settings />} />
<Route path="/notifications" element={<Notifications />} />
</Route>
<Route path="*" element={<Navigate to="/404" replace />} />
</Routes>
);
};
Settings
import { Routes } from 'react-router-dom';
function Settings = () => {
{... lots of common code}
return (
<div>
{...common html}
<Routes>
<Route
path="/basic" // "/settings/basic"
element={<Basic />}
/>
<Route
path="/notifications" // "/settings/notifications"
element={<Notifications />}
/>
</Routes>
</div>
);
};

React Router, hide Nav & footer on certain pages. with Router V6

So i have tried for quiet some time to hide the nav and footer components in certain pages of the site, but sadly no luck. I've tried multiple solutions on Stackoverflow, only one of them worked partially by creating a new Layout component and then putting that inside the Routes to then exclude the footer and nav from for example the login page. But the issue was that it worked, but on homepage it then only showed the footer and nav, and nothing in between like the design I made in the homepage.
The only solution that works for me is by creating the and like I did in the example, but then I cant exclude certain pages and hide them there...
This is how it looks currently and not working:
import React from "react";
import Home from ".//Pages/Home";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Dashboard from "./Pages/Dashboard";
import Login from "./Pages/Login";
import Price from "./Pages/Price";
import ErrorPage from "./Pages/ErrorPage";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
import Profile from "./Pages/Profile";
function App() {
return (
<Router>
<nav>
<Navbar />
</nav>
<Routes>
<Route index element={<Home />} />
<Route path="/Dashboard" element={<Dashboard />} />
<Route path="/Login" element={<Login />} />
<Route path="/Price" element={<Price />} />
<Route path="/Profile/:username" element={<Profile />} />
<Route path="/*" element={<ErrorPage />} />
</Routes>
<footer>
<Footer />
</footer>
</Router>
);
}
export default App;

Hi you can do it by having a state that only when the state is true the nav and footer will render:
function App() {
const [showNav, setShowNav- = useState(true);
return (
<Router>
{ showNav &&
<nav>
<Navbar />
</nav>
}
<Routes>
<Route index element={<Home />} />
<Route path="/Dashboard" element={<Dashboard />} />
<Route path="/Login" element={<Login />} />
<Route path="/Price" element={<Price />} />
<Route path="/Profile/:username" element={<Profile />} />
<Route path="/*" element={<ErrorPage />} />
</Routes>
{showNav &&
<footer>
<Footer />
</footer>
</Router>
}
);
}
And for example, if you don't want to show the nav in the homepage you will pass the setShowNav function as a prop and will set it to false:
<Route index element={<Home funcNav={setShowNav}/>} />
in home page:
props.funcNav(false);

You can use modularization in your app segmenting it into different sections. This can best be accomplished by using nested routes in your app each. For example you could have example.com/routes/xxx have one layout and have example.com/other/xxx have another layout... You could also use this to optionally render the navbar and footer as you have mentioned.It is a good idea to segment your app if it has very different features/areas where different navbar/footer combinations need to be used. Here is an example using most of your code which would segment it into a main layout, and no layout.
App.js
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import PageWithoutHeaderOrFooter from "./Pages/NoHeaderOrFooter";
import MainLayoutRoutes from "./Layouts/MainLayoutRoutes";
function App() {
return (
<Router>
<Routes>
<Route path="/noheaderorfooter" element={<PageWithoutHeaderOrFooter />} />
<Route path="*" element={<MainLayoutRoutes />} />
</Routes>
</Router>
);
}
export default App;
MainLayuotRoutes.js
import React from 'react';
import Home from ".//Pages/Home";
import Dashboard from "./Pages/Dashboard";
import Login from "./Pages/Login";
import Price from "./Pages/Price";
import ErrorPage from "./Pages/ErrorPage";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
import Profile from "./Pages/Profile";
function MainLayoutRoutes() {
return (
<React.Fragment />
<nav>
<Navbar />
</nav>{/*This is outside the routes component on purpose read below*/}
<Routes>
<Route index element={<Home />} />
<Route path="/Dashboard" element={<Dashboard />} />
<Route path="/Login" element={<Login />} />
<Route path="/Price" element={<Price />} />
<Route path="/Profile/:username" element={<Profile />} />
<Route path="/*" element={<ErrorPage />} />
</Routes>
<footer>
<Footer />
</footer>
<React.Fragment />
)
}
export default MainLayoutRoutes;
A couple things I would like to note about this code.
First each child component in a Routes component must be a Route component (this doesn't include the element part of the Route component). This is why I am using a React.Fragment (you could have just as easily used <></>) if you didn't want an additional div rendered.
Secondly using this type of routing is good for segmenting your app into areas... Using areas not only is better for routing it is also better for SEO (where applicable as some crawlers don't yet support JavaScript).
Lastly I would like to mention if there is a rare case where there is only 1 page that you want a different navbar or footer, just use conditional rendering to take care of the edge case.

You can also use UseLocation from react-router-dom
const { pathname } = useLocation();
<footer>
{pathname !== '/<SOME_ROUTE>' &&
<Footer />}
</footer>

yes you should apply condition that will check if current location will display nav or not
You should use useLocation from react-router
To do this

Here is example from official documentation how you can do that.
Using Route components:
<Routes>
<Route path="/" element={<App />}>
<Route index element={<Home />} />
<Route path="teams" element={<Teams />}>
<Route path=":teamId" element={<Team />} />
<Route path=":teamId/edit" element={<EditTeam />} />
<Route path="new" element={<NewTeamForm />} />
<Route index element={<LeagueStandings />} />
</Route>
</Route>
<Route element={<PageLayout />}>
<Route path="/privacy" element={<Privacy />} />
<Route path="/tos" element={<Tos />} />
</Route>
<Route path="contact-us" element={<Contact />} />
</Routes>
Using useRoutes hook:
let routes = [
{
element: <App />,
path: "/",
children: [
{
index: true,
element: <Home />,
},
{
path: "teams",
element: <Teams />,
children: [
{
index: true,
element: <LeagueStandings />,
},
{
path: ":teamId",
element: <Team />,
},
{
path: ":teamId/edit",
element: <EditTeam />,
},
{
path: "new",
element: <NewTeamForm />,
},
],
},
],
},
{
element: <PageLayout />,
children: [
{
element: <Privacy />,
path: "/privacy",
},
{
element: <Tos />,
path: "/tos",
},
],
},
{
element: <Contact />,
path: "/contact-us",
},
];
And of course you should use <Outlet/> component inside <App /> and <PageLayout /> to render childrens inside those layouts.

App.js
<Router>
<Routes>
//your other route
<Route path="/404" element={<NotFound />} />
<Route path="*" element={<Navigate to="/404" />} />
</Routes>
</Router>
Navbar.js
const withouSidebarRoutes = ["404", "/signin", "/etc"];
const { pathname } = useLocation();
if (withouSidebarRoutes.some((item) => pathname.includes(item)))
return null;
Work fine for me :))

How to separate routes inside a React App

I have the following on my index.js
<Router routes={routes} />
I would like to have routes section in a separate file, so far I tried this:
routes.js
export default (
<div>
<Route path="/" component={AppComponent}>
<Route path="/someother" component={AddProductComponent} />
</Route>
<Route path="/products" component={ListProductComponent} />
</div>
);
and in index.js
import routes from './routes';
<Router routes={routes} />
For some reason the app shows blank now. looks like the routes are not rendered.
UPDATE, this is my whole index.js except missing imports due stackoverflow companing about too much code put:
const rootReducer = combineReducers({
products: productReducer,
});
const store = createStore(
rootReducer,
applyMiddleware(thunk),
);
ReactDOM.render(
<Provider store={store}>
<Router routes={routes} />
</Provider>
, document.getElementById('root')
);
Update routes.js
export default (
<Switch>
<Route exact path="/" component={AppComponent}/>
<Route path="/products" component={ListProductComponent}>
<Route path="/details/:productId" component={AddProductComponent} />
</Route>
</Switch>
);

You're missing the switch:
<Switch>
<Route path="/someother" component={AppComponent}>
<Route path="/products" component={ListProductComponent} />
<Route path="/" component={AppComponent}>
</Switch>
Also, your code will only show AppComponent, as any url (/, /home, /etc) starts with the slash you put in the path attribute. You might want that as a last page, a fallback.
The path attribute works with a wildcare: path="/" -> path="/**" are functionally the same. If you want an exact path, add exact to the Route.
If you mean to split routes into seperate files, you can do this:
<Switch>
<Route path={"/user"} component={UserRouter}/>
<Route path={"/product"} component={ProductRouter}/>
</Switch>
// In userRouter.jsx:
export function UserRouter() {
return <Switch>
<Route exact path={"/user/list"} component={UserListPage}/>
<Route exact path={"/user/signup"} component={userSignupPage}/>
<Route exact path={"/user/profile"} component={UserProfilePage}/>
</Switch>
};

Nested <Route> components are not rendering properly in react-redux-router [duplicate]

I am trying to group some of my routes together with React Router v4 to clean up some of my components. For now I just want to have my non logged in routes group together and my admin routes grouped together but the following doens't work.
main.js
const Main = () => {
return (
<main>
<Switch>
<Route exact path='/' component={Public} />
<Route path='/admin' component={Admin} />
</Switch>
</main>
);
};
export default Main;
public.js
const Public = () => {
return (
<Switch>
<Route exact path='/' component={Greeting} />
<Route path='/signup' component={SignupPage} />
<Route path='/login' component={LoginPage} />
</Switch>
);
};
export default Public;
The Greeting component shows at "localhost:3000/", but the SignupPage component does not show at "localhost:3000/signup" and the Login component doesn't show at "localhost:3000/signup". Looking at the React Dev Tools these two routes return Null.

The reason is very obvious. for your route in main.js, you have specified the Route path of Public component with exact exact path='/' and then in the Public component you are matching for the other Routes. So if the route path is /signup, at first the path is not exact so Public component is not rendered and hence no subRoutes will.
Change your route configuration to the following
main.js
const Main = () => {
return (
<main>
<Switch>
<Route path='/' component={Public} />
<Route path='/admin' component={Admin} />
</Switch>
</main>
);
};
export default Main
public.js
const Public = () => {
return (
<Switch>
<Route exact path='/' component={Greeting} />
<Route path='/signup' component={SignupPage} />
<Route path='/login' component={LoginPage} />
</Switch>
);
};
Also when you are specifying the nested routes these should be relative to the parent Route, for instance if the parent route is /home and then in the child Route you wish to write /dashboard . It should be written like
<Route path="/home/dashboard" component={Dashboard}
or even better
<Route path={`${this.props.match.path}/dashboard`} component={Dashboard}