Develop Reference

React router dom 6 route structure with layouts

I have this page structure
login (Root page)
forget password
dashboard (Wrapper layout needed)
orders (Wrapper layout needed)
The orders page and Dashboard needed the wrapper layout.
Right now I have this code
const routes = createBrowserRouter(
createRoutesFromElements(
<Route path="/" element={<RootLayout />}>
<Route path="orders" element={<Orders />} />
<Route path="dashboard" element={<Dashboard />} />
</Route>
)
);
And this is root layout
export default function RootLayout() {
return (
<div>
<header>
<h1>This top header</h1>
</header>
<main>
<Outlet/>
</main>
</div>
)
}
I am unsure how I can add Login page to the root path and Forget password page to the "/forget-password" path. RootLayout should not wrap in those two pages as well.
I have tried this approach even though it is adding a extra "/app" part. But this also not working as intended
createRoutesFromElements(
<Route path="/" element={<Login />}>
<Route path="app" element={<RootLayout />}>
<Route path="orders" element={<Orders />} />
<Route path="dashboard" element={<Dashboard />} />
</Route>
</Route>
)
How can I achieve this with react-router-dom#6?

createRoutesFromElements expects a single React node. Render a single "outer" route on "/" with no element which will render an Outlet by default. "RootLayout" is a layout route and doesn't need to participate in the route path matching, omit the path="app" prop.
createRoutesFromElements(
<Route path="/">
<Route index element={<Login />} /> // <-- "/"
<Route
path="forgot-password // <-- "/forgot-password"
element={<ForgotPassword />}
/>
<Route element={<RootLayout />}>
<Route
path="orders" // <-- "/orders"
element={<Orders />}
/>
<Route
path="dashboard" // <-- "/dashboard"
element={<Dashboard />}
/>
</Route>
</Route>
)

How to render 404 page outside main layout

I am using react-router#6, and want to add a route for 404 pages, and render the page outside the main layout. This is what I have so far:
<BrowserRouter>
<Routes>
<Route path='/' element={<Layout />}>
<Route
path='/'
element={<HomePage />}
/>
<Route
path='login'
element={<LoginPage />}
/>
</Route>
<Route
path='*'
element={<PageNotFound />}
/>
</Routes>
</BrowserRouter>
The "*" route works fine, PageNotFound component is rendering outside the layout, as it should. Problem is that the any of the other routes does not show up, only the layout.
What am I missing?

From what you describe it sounds like the Layout component is missing rendering an Outlet component for the nested routes to render their content into.
Example:
import { Outlet } from 'react-router-dom';
const Layout = () => {
...
return (
<>
... common layout UI ...
<Outlet /> // <-- nested routes render out here
</>
);
};
<BrowserRouter>
<Routes>
<Route element={<Layout />}>
<Route path='/' element={<HomePage />} />
<Route path='login' element={<LoginPage />} />
</Route>
<Route path='*' element={<PageNotFound />} />
</Routes>
</BrowserRouter>
For more details you can see the following:
Layout Routes
Outlets

On login screen layout keeps showing - React & React router

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>

How can React-Router-Dom v6 properly distribute internal routers among components?

There is routing at the top level with internal routing, the question arose to add routing inside components such as ProductsPage, ElementsPage, etc.
<BrowserRouter>
<Routes>
<Route path='/' element={<PageLayout />}>
<Route path='marketplace'>
<Route path='products' element={<ProductsPage />} />
<Route path='constituents' element={<ElementsPage />} />
<Route path='resources' element={<ResourcesPage />} />
<Route path='shopping' element={<ShoppingPage />} />
</Route>
<Route path='resource-center'>
<Route path='planner' element={<>планирование</>} />
<Route path='resources' element={<>resources</>} />
</Route>
<Route path='*' element={<>Страница не найдена 404</>} />
</Route>
</Routes>
</BrowserRouter>
The question is how to do this in version 6. Because before version five, you could easily throw a switch into a component a la ProductsPage and specify routes in the switch

You can name all pages explicitly.
<BrowserRouter>
<Routes>
<Route path='/' element={<PageLayout />} />
<Route path='/marketplace/products' element={<ProductsPage />} />
<Route path='/marketplace/constituents' element={<ElementsPage />} />
<Route path='/marketplace/resources' element={<ResourcesPage />} />
<Route path='/marketplace/shopping' element={<ShoppingPage />} />
<Route path='/resource-center/planner' element={<планирование />} />
<Route path='/resource-centerresources' element={<resources/>} />
<Route path='*' element={<Страница не найдена 404/>} />
</Routes>
</BrowserRouter>

React-Router dose not work while using BrowserRouter after Build

So i have a app which is using React-Router BrowserRouter to navigate between different components
Code:
return (
<Router>
<div className="container">
<Navbar logged={loggedIn} />
<Switch>
<Route path="/" exact>
<Welcome />
</Route>
<Route path="/logout" exact>
<Logout loggedSet={setLoggedIn} logged={loggedIn} />
</Route>
<Route path="/login" exact>
<Login onLogin={login} loggedIn={loggedIn} />
</Route>
<Route path="/dashboard" exact>
{loggedIn ? <Dashboard /> : <Redirect to="/" />}
</Route>
<Route path="/add" exact>
{loggedIn ? <Add /> : <Redirect to="/" />}
<Add />
</Route>
</Switch>
</div>
</Router>
);
When i build this this shows a Blank Page i got to know to add "homepage": ".", in package.json . I did so and not it shows Navbar Component but it dosent show any components which are under I searched and found we need to use HashRouter. is using hashrouter correct if so how to change my code to use hashrouter.
Thankyou

You should put the generic route last, without the exact as shown below. Otherwise it'll only show up if your are exactly at root /, any hashes, query params etc will cause it to not match and your app will not show anything:
<Switch>
<Route path="/logout" exact>
<Logout loggedSet={setLoggedIn} logged={loggedIn} />
</Route>
<Route path="/login" exact>
<Login onLogin={login} loggedIn={loggedIn} />
</Route>
<Route path="/dashboard" exact>
{loggedIn ? <Dashboard /> : <Redirect to="/" />}
</Route>
<Route path="/add" exact>
{loggedIn ? <Add /> : <Redirect to="/" />}
<Add />
</Route>
<Route path="/">
<Welcome />
</Route>
</Switch>

you are putting the build in a subfolder?. If yes check this:
React Router with relative path deployment
and this
React-router app deployed on different locations (subdirectories)