I am creating an app which requires multiple level of nesting. from 3rd level my routes are not getting recognised.
App JS
const App = () => {
return (
<React.Fragment>
<Router>
<Switch>
<Route path="/login">
<Login />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</Router>
</React.Fragment>
);
};
Home JS
export default class Home extends React.Component {
render() {
return (
<React.Fragment>
<Header />
<ContentNav />
<Switch>
<Route path="/clients">
<Clients />
</Route>
<Route path="/publishers">
<Publishers />
</Route>
<Route path="/">
<Redirect to="/clients" />
</Route>
</Switch>
</React.Fragment>
);
}
}
Clients JS
class Clients extends React.Component {
render() {
return (
<React.Fragment>
Clients Page
<Switch>
<Route path="/add">
<AddClient />
</Route>
<Route path="/edit">
<AddClient />
</Route>
<Route path="/">
<Entity />
</Route>
</Switch>
</React.Fragment>
);
}
}
these routers are rendering same component
http://localhost:3000/clients
http://localhost:3000/clients/add
http://localhost:3000/clients/edit
react nested urls are not relative, have to specify absolute path :
<Switch>
<Route path="clients/add">
<AddClient />
</Route>
<Route path="clients/edit">
<AddClient />
</Route>
<Route path="clients/">
<Entity />
</Route>
</Switch>
Related
<BrowserRouter>
<Routes>
<Route path='/' element={<Home />} />
<Route path='users' element={<Users />} >
<Route path='user1' element={<User1 />} />
<Route path='user2' element={<User2 />} />
<Route path='user3' element={<User3 />} />
</Route>
</Routes>
</BrowserRouter>
____________________________________________
import React from 'react'
import { NavLink, Outlet } from 'react-router-dom'
function Users() {
return (
<div>
<NavLink to='user1'>User1</NavLink>
<NavLink to='user2'>User2</NavLink>
<NavLink to='user3'>User2</NavLink>
<Outlet/>
</div>
)
}
export default Users;
I am using react router dom#6. While hitting users url wanted to make user1 as a default component to show on screen along with users and it also redirects url to users/user1
You can use the <Navigate> element.
<Route path='users' element={<Users />} >
<Route path='' element={<Navigate to="users/user1" replace/>} />
<Route path='user1' element={<User1 />} />
<Route path='user2' element={<User2 />} />
<Route path='user3' element={<User3 />} />
</Route>
I'm getting this error when I wrap some of my routes in a Context Provider tag. I basically need to send the logged user context to each of these routes for them to use or modify. The value sent in the provider is this:
const [loggedUser, setLoggedUser] = useState(null)
const value = useMemo(() => {{ loggedUser, setLoggedUser }}, [loggedUser, setLoggedUser])
And here is the code:
return (
<>
<Routes>
<Route path="/" element={ <MainPage /> } />
<UserContext.Provider value={value}>
<Route path="/login" element={<LoginMenu/>} />
<Route path="/register" element={<RegisterMenu/>} />
<Route path="/dashboard" element={<Dashboard tasks={tasks} />} />
</UserContext.Provider>
</Routes>
</>
)
Only Route component can be a child of a Route component. Abstract the UserContext.Provider component into a layout route.
Example:
import { Routes, Route, Outlet } from 'react-router-dom';
const UserContextProvider = () => (
<UserContext.Provider value={value}>
<Outlet />
</UserContext.Provider>
);
...
<Routes>
<Route path="/" element={<MainPage />} />
<Route element={<UserContextProvider />}>
<Route path="/login" element={<LoginMenu />} />
<Route path="/register" element={<RegisterMenu />} />
<Route path="/dashboard" element={<Dashboard tasks={tasks} />} />
</Route>
</Routes>
Or wrap the entire Routes in the UserContext.Provider component.
Example:
return (
<UserContext.Provider value={value}>
<Routes>
<Route path="/" element={ <MainPage /> } />
<Route path="/login" element={<LoginMenu />} />
<Route path="/register" element={<RegisterMenu />} />
<Route path="/dashboard" element={<Dashboard tasks={tasks} />} />
</Routes>
</UserContext.Provider>
);
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>
i have a project which i use the layer component to display the navbar component and the main
and i use it as a layout for app routes.
the problem is how to display the transparent nav to every route whose have a different main background-image. ?
function App() {
return (
<Layer>
<Switch>
<Route path="/home" exact>
<Main />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/projects">
<Projects />
</Route>
<Route path="/contact">
<Contact />
</Route>
<Route path="/" exact>
<Redirect to="/home" />
</Route>
<Route path="*">
<NotFoundPage />
</Route>
</Switch>
</Layer>
);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
const Layer = (props) => {
return (
<Fragment>
<Navbar />
<div className='main'>{props.children}</div>
</Fragment>
);
};
enter code here
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>
);
};