Develop Reference

React router outlet not rendering the layout

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>
);
}

React Route does not work - Single page app

I'm trying to build a single page app with route but it is not working.
It only works when i type the url manually, but if i click it doesnt redirect to the page.
i'm using an sidemenu.js to render the list and in the app.js to render the content.
Here it is:
app.js
function App() {
return (
<div className="App">
<HashRouter>
<BrowserRouter>
<Switch>
<Route exact path="/Home">
<Home />
</Route>
<Route exact path="/Consultas">
<Consultas />
</Route>
<Route path="/diagnosticos" exact component={<Diagnosticos/>}/>
<Route path="/Noticias" component={Noticias}/>
<Route path="/Configs" component={Configuracoes}/>
</Switch>
</BrowserRouter>
</HashRouter>
</div>
);
}
export default App;
sidemenu.js
function SideMenu() {
return (
<HashRouter>
<div id="sideMenu">
<img src={require('./HwBC.png')} alt="" />
<hr />
<h1>menu</h1>
<BrowserRouter>
<ul>
<li><NavLink to="/">Home</NavLink></li>
<li><NavLink exact to="/consultas">Consultas</NavLink></li>
<li><NavLink to="/diagnosticos">Diagnostiocos</NavLink></li>
<li><NavLink to="/noticias">Noticias</NavLink></li>
<li><NavLink to="/configs">Configuracoes</NavLink></li>
</ul>
</BrowserRouter>
</div>
</HashRouter>
)
};
export default SideMenu;
And i have already other solutions in some post and it havent worked yet.

Issue
You are rendering the routes and the links to them into two separate routing contexts. Only a single routing context is necessary for the entire React application.
Also, you likely don't need both a HashRouter and a BrowserRouter. Pick the one the suits your app's needs.
Solution
Render all the routes and links into a single routing context. Lift the HashRouter/BrowserRouter up the ReactTree such that only a single router is wrapping both the App rendering the routes and the SideMenu components.
Example:
index.js
<BrowserRouter>
<SideMenu />
<App />
</BrowserRouter>
App
function App() {
return (
<div className="App">
<Switch>
<Route path="/Consultas">
<Consultas />
</Route>
<Route path="/diagnosticos" component={Diagnosticos} />
<Route path="/Noticias" component={Noticias} />
<Route path="/Configs" component={Configuracoes}/ >
<Route path="/">
<Home />
</Route>
</Switch>
</div>
);
}
export default App;
SideMenu
function SideMenu() {
return (
<div id="sideMenu">
<img src={require('./HwBC.png')} alt="" />
<hr />
<h1>menu</h1>
<ul>
<li><NavLink exact to="/">Home</NavLink></li>
<li><NavLink to="/consultas">Consultas</NavLink></li>
<li><NavLink to="/diagnosticos">Diagnostiocos</NavLink></li>
<li><NavLink to="/noticias">Noticias</NavLink></li>
<li><NavLink to="/configs">Configuracoes</NavLink></li>
</ul>
</div>
)
};
export default SideMenu;

React-Router-DOM: unable to render Link in the same page (component)

consider the following example, I have a login page and an admin page. After logging in we will be redirected to admin page.
The admin page is shown as follows.
Desired behaviour: To render cars component in the admin component itself
Actual behaviour: On clicking cars or bikes component they are being rendered on a different page.
code is as follows
App.js
//imports here
function App() {
return(
<Router>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/admin" component={Admin} />
<Route exact path="/cars" component={Cars} />
<Route exact path="/bikes" component={Bikes} />
</Switch>
</Router>
);
}
Admin.js
//imports here
const Admin = () => {
return (
<Fragment>
<div className="is-flex">
<Sidebar />
<Navbar />
</div>
</Fragment>
);
};
navbar.js
// imports here
const Sidebar = () => {
return (
<aside className="aside">
<p className="menu-label">Test Routes</p>
<ul className="menu-list">
<li>
<Link to="/cars">Cars</Link>
</li>
<li>
<Link to="/bikes">Bikes</Link>
</li>
</ul>
</aside>
);
};
Using react-router-dom ^5.1.2
Tried this but not able to understand what I missed? how to solve this problem?

Move your default route to the bottom of the stack. i.e.
function App() {
return(
<Router>
<Switch>
<Route path="/admin" component={Admin} />
<Route path="/cars" component={Cars} />
<Route path="/bikes" component={Bikes} />
<Route exact path="/" component={Login} />
</Switch>
</Router>
);
}

How to change props.data in dependence of inner component?

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>;

React router v4 rendering issue

I am doing the SPA separate with Login Page, but I was unable to route to the login page, the address bar was changed after clicking the logout button, but it did not render any login page content.
Version:
NPM -> 6.4.1
React-Router -> 4
create-react-app
File: index.js
ReactDOM.render(
<Router>
<Switch>
<Route path="/" component={Main} />
<Route path="/login" component={AuthenticateLoginPage} />
</Switch>
</Router>,
document.getElementById("root")
);
Main -> index.js
const SmartCabinet = () => (
<Switch>
<Route exact path='/smartcabinet' component={SmartCabinetIndexPage} />
<Route path='/smartcabinet/:number' component={SmartCabinetEditPage} />
</Switch>
)
const User = () => (
<Switch>
<Route exact path='/user' component={UserIndexPage} />
<Route path='/user/create' component={UserCreatePage} />
<Route path='/user/:number' component={UserEditPage} />
</Switch>
)
render() {
return (
<div>
<div className="ui menu">
<div className="right menu">
<NavLink className="item" exact to="/login">Log out</NavLink>
</div>
</div>
<Grid columns='equal' relaxed={true}>
<Grid.Column width='2'>
<div className="sidenav">
<ul className="header">
<li><NavLink exact to="/">Home</NavLink></li>
<li><NavLink to="/materialrequest">Material Request</NavLink></li>
<li><NavLink to="/smartcabinet">Smart Cabinet</NavLink></li>
<li><NavLink to="/user">User</NavLink></li>
</ul>
</div>
</Grid.Column>
<Grid.Column>
<div className="mainContent">
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/materialrequest" component={MaterialRequestIndexPage} />
<Route path="/smartcabinet" component={SmartCabinet} />
<Route path="/user" component={User} />
</Switch>
</div>
</Grid.Column>
</Grid>
</div>
);
}
}