Trying to render dashboard component inside the layout using <Outlet /> but when accessing the /admin/dashboard route, The layout is not rendering. How to fix this?
App.js:
export default function App() {
return (
<div className="App">
<Router>
<Routes>
<Route exact path="/admin" element={<Layout />} />
<Route exact path="/admin/dashboard" element={<Dashboard />} />
</Routes>
</Router>
</div>
);
}
Layout.js:
export default function Layout() {
return (
<Fragment>
<div className="sb-nav-fixed">
<Navbar />
<div id="layoutSidenav">
<div id="layoutSidenav_nav">
<Sidebar />
</div>
<div id="layoutSidenav_content">
<main>
<Outlet />
<Navigate from="admin" to="/admin/dashboard" />
</main>
<Footer />
</div>
</div>
</div>
</Fragment>
);
}
Dashboard.js:
export default function Dashboard() {
return <h1>Dashboard</h1>;
}
Layout routes need to actually have a nested route to be able to have it render its element into the Outlet, not as sibling routes.
export default function App() {
return (
<div className="App">
<Router>
<Routes>
<Route path="/admin" element={<Layout />}>
<Route path="dashboard" element={<Dashboard />} />
</Route>
</Routes>
</Router>
</div>
);
}
Additionally, if you don't want to render anything on "/admin" then remove the redirect from Layout, remove the path prop from the layout route, and update the path of the dashbard.
Example:
export default function Layout() {
return (
<Fragment>
<div className="sb-nav-fixed">
<Navbar />
<div id="layoutSidenav">
<div id="layoutSidenav_nav">
<Sidebar />
</div>
<div id="layoutSidenav_content">
<main>
<Outlet /> // <-- no redirect now
</main>
<Footer />
</div>
</div>
</div>
</Fragment>
);
}
...
export default function App() {
return (
<div className="App">
<Router>
<Routes>
<Route element={<Layout />}>
<Route path="/admin/dashboard" element={<Dashboard />} />
</Route>
<Route path="*" element={<Navigate to="/admin/dashboard" replace />} />
</Routes>
</Router>
</div>
);
}
If the plan is to render other routes into the layout route then keep the paths as they are and move the redirect to an index route.
export default function App() {
return (
<div className="App">
<Router>
<Routes>
<Route path="/admin" element={<Layout />}>
<Route index element={<Navigate to="dashboard" replace />} />
<Route path="dashboard" element={<Dashboard />} />
... other admin routes ...
</Route>
</Routes>
</Router>
</div>
);
}
Related
How to render Overlay component just for a one time instead of rendering it in each Route.
Here is code of my App.js
function App() {
return (
<div className="App">
<Navbar />
<div className='container'>
<Sidebar />
<Routes>
<Route path='/' element={<Overlay pathName={'Главная'} />} />
<Route path='/orders' element={<Overlay pathName={'Заказы'} />} />
<Route path='/products' element={<Overlay pathName={'Товары'} />} />
<Route path='/reviews' element={<Overlay pathName={'Отзывы'} />} />
<Route path='/checkout' element={<Overlay pathName={'Оформить заказ'} />} />
</Routes>
</div>
</div>
);
}
<Routes>
{
[
{url:'/',pathname:'abc'},
{url:'/orders',pathname:'def'},
{url:'/products',pathname:'ghi'},
{url:'/reviews',pathname:'jkl'},
{url:'/checkout',pathname:'mno'},
].map(elem=><Route key={elem.url} path={elem.url} element={<Overlay pathname={elem.pathname}/>} />)
}
<Routes />
I was refactoring my React app after updating React Router to v6 and I got rid of the error I was getting in my routes, except now the desired layout is broken.
I need to include a permanent toolbar and a sidebar to be visible only in some pages. I tried to follow the docs but now the layout component is placed above all the pages it should be wrapping, not just overlapping them, but actually concealing them behind it.
The Layout component:
function Layout({ children }) {
return (
<div className="layout">
<Header />
<SidePanel />
<div className="main" style={{ marginTop: "100px" }}>
{children}
</div>
</div>
);
}
export default Layout;
The AppRouter component:
function AppRouter() {
return (
<Router>
<Routes>
<Route path="/" exact element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/sign-up" element={<SignUp />} />
<Route element={<Layout />}>
<Route path="/diary" element={<Diary />} />
<Route path="/results" element={<Results />} />
<Route path="/details" element={<Details />} />
<Route path="/about" element={<About />} />
</Route>
</Routes>
</Router>
);
}
export default AppRouter;
Layout should render an Outlet for the children Routes to be rendered into.
import { Outlet } from 'react-router-dom';
function Layout() {
return (
<div className="layout">
<Header />
<SidePanel />
<div className="main" style={{ marginTop: "100px" }}>
<Outlet />
</div>
</div>
);
}
Outlet
An <Outlet> should be used in parent route elements to render their
child route elements. This allows nested UI to show up when child
routes are rendered.
New to react, So a little confused on why this was giving me an error.
This is my main.js file
const Main = () => (
<div>
<Menu pointing secondary stackable>
<Menu.Menu position='right'>
<Menu.Item active as={NavLink} exact to='/' name='Welcome' />
<Menu.Item as={NavLink} to='/powersection' name='power' />
</Menu.Menu>
</Menu>
<Segment raised className='magentaSegment'>
<Routes>
<Route exact path='/' element={<HomeView />} />
<Route path='/powersection' element={<PowerSection />} />
</Routes>
</Segment>
</div>
)
export default Main
This is what my App.js file looks like
function App() {
return (
<div id='container'>
<div id='main'>
<Routes>
<Route path='/' element={ <Main />} />
</Routes>
</div>
<div id='footer'>
<Footer />
</div>
</div>
);
}
export default App;
And this is my index.js file.
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
reportWebVitals();
When I toggle to the Power menu item. this is the error i get
index.js:44 No routes matched location "/powersection"
Anyone know how i can fix this? Thank you
import ...
const App = () => {
const [showModal, setShowModal] = useState(false);
const toggleModalShow = () => {
setShowModal(!showModal);
};
return (
<div className="app">
<Router>
<ScrollToTop>
<Routes>
<Route
exact
path="/"
element={
<>
<Header
toggleModalShow={toggleModalShow}
showModal={showModal}
/>
<main className="main">
<Home />
</main>
</>
}
/>
<Route
path="/games/:game"
element={
<>
<Header
toggleModalShow={toggleModalShow}
showModal={showModal}
/>
<GameLobby />
</>
}
/>
<Route
path="/games"
element={<PrivateRoute isLoggedIn={isLoggedIn} />}
>
<Route
path="/games"
element={
<>
<Header
toggleModalShow={toggleModalShow}
showModal={showModal}
/>
<Games />
</>
}
/>
</Route>
</Routes>
</ScrollToTop>
</Router>
</div>
);
};
export default App;
Hi all.i want to show <Header /> component in every route but to this i have to use <Header /> component in every <Route />. Is there any way to do that without ? Finally i would be appreciate if you give me feedback about project.
repo : https://github.com/UmutPalabiyik/mook
deploy: https://mook-f2b4e.web.app
for testing:
username: test
pass: 123
Just move the Header above Routes:
return (
<div className="app">
<Router>
<Header
toggleModalShow={toggleModalShow}
showModal={showModal}
/>
<ScrollToTop>
<Routes>
<Route
exact
path="/"
element={
<>
<main className="main">
<Home />
</main>
</>
}
/>
...
</Routes>
</ScrollToTop>
</Router>
</div>
);
};
ProductPage
MainPage
I want to click on product on MainPage and Open info about it on ProductPage. I want to open exactly that product, that i had clicked on MainPage.
I have an App.js with router. When I click on ProductCard component in MainPage i want to open ProductPage exactly with that props, that shows in ProductCard. How can I do this?
App.js:
<BrowserRouter>
<div className="App">
<Switch>
<Route path="/LoginPage" component={LoginPage} />
<Route exact
path="/"
render={() => <MainPage data={data} />}
//data={data}
/>
<Route path="/RegistrationPage" component={RegistrationPage} />
<Route path="/ProductPage" component={ProductPage} />
</Switch>
</div>
</BrowserRouter>
MainPage:
<div className="product-cards">
{props.data.map(function(item, index) {
return <ProductCard key={index} data={item} />;
})}
</div>
ProductCard:
<a className="a" href="/ProductPage">
<div className="card-block">
<img
className="image-style"
src={props.data.url}
alt={props.data.name}
/>
<span className="product-name">{props.data.name}</span>
</div>
</a>
ProductPage(shows error):
<div className="product-page">
<hr className="hr" />
<div class="product-description">
<img src={props.data.url} alt={props.data.name}/>
</div>
</div>
You aren't passing any props to Product Page which is causing error.
<BrowserRouter>
<div className="App">
<Switch>
<Route path="/LoginPage" component={LoginPage} />
<Route
exact
path="/"
render={() => <MainPage data={data} />}
/>
<Route path="/RegistrationPage" component={RegistrationPage} />
<Route path="/ProductPage"
render={() => <ProductPage data={data} />} />
</Switch>
</div>
</BrowserRouter>;