Develop Reference

How do I make react router v6 load elements without having to manualy refresh the url?

When I send the user to a URL (in this case /login and /signup and then back to /)
the elements on my page don't load automatically by entering the URL, I instead have to manually refresh in order for the content to load.
This is my index.js which handles the routes (with react router v6)
import Navbar from "./components/navbar/navbar";
import Footer from "./components/footer/footer";
import Home from "./pages/home/home";
import Login from "./pages/user/login/login";
import Signup from "./pages/user/signup/signup";
ReactDOM.render(
<div>
<Navbar />
<BrowserRouter>
<Routes>
<Route index path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/signup" element={<Signup />} />
</Routes>
</BrowserRouter>
<Footer />
</div>,
document.getElementById("root")
);
This is an example of what happens when I send the user to /login with the use of the Link component that I am importing through React-router.
Before refreshing the URL on /login
I then have to manually reload the page by pressing the reload button, only after doing so the content will load.
After refreshing the URL on /login
the same applies if I try to go back to the homepage using the Link component
Before refreshing on the URL /
I then have to reload in order to remove the login box
After refreshing on the URL /

I reproduced the same behavior. CodeSandbox (try it and look at home.js)
You don't seem to be using the page navigation correctly. The most react way is to use the useNavigation() hook.

If navigation is working but the routes aren't then I suspect you are rendering them into separate routers. I notice you render the Navbar outside your BrowserRouter, and since navigation is working and updating the URL in the address bar is fairly safe to assume those links are correctly wrapped in a router. You'd see an invariant warning/error otherwise.
ReactDOM.render(
<div>
<Navbar /> // <-- must have another router if it is working
<BrowserRouter>
<Routes>
<Route index path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/signup" element={<Signup />} />
</Routes>
</BrowserRouter>
<Footer />
</div>,
document.getElementById("root")
);
You should have only one router wrapping the app and providing the routing context to all Routes, Route, Navigate, Link, etc... components.
Remove any extraneous routers in other components, like NavBar, and move them all to be within the BrowserRouter you are rendering here.
ReactDOM.render(
<BrowserRouter>
<Navbar />
<Routes>
<Route index path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/signup" element={<Signup />} />
</Routes>
<Footer />
</BrowserRouter>,
document.getElementById("root")
);

How to route to another parent route from a nested route in react-router

I'm having a Parent Container like this:
<Router>
<Switch>
<Route path="/website" component={Website} />
<Route path="/dashboard" component={Dashboard} />
</Switch>
</Router>
And both the Website and Dashboard components has another set of routes.
<Router>
<Switch>
<Route path="/page-one" component={PageOne} />
<Route path="/page-two" component={PageTwo} />
</Switch>
</Router>
//dash
<Router>
<Switch>
<Route path="/dash-page-one" component={DashOne} />
<Route path="/dash-page-two" component={DashTwo} />
</Switch>
</Router>
And Inside PageOne again, I have a child component, from where I want to navigate to <Dashboard /> (another parent) component but it didn't leave the current page, but the route changed.
function(){
<Link to="/dashboard">
Go to dashboard.
</Link>
}

You should only render the router component once by wrapping it around the root of your app, than you should be able to split the the routes navigating to anything inside the router. By creating separate router instances you are in essence creating separate routing environments.

Nesting routes in React using HashRouter

I'm creating dashboard/admin control panel application in React and I'm not sure how to handle component rendering correctly.
So at first my main App component looks like this:
<React.Fragment>
<div className="main--container">
<HashRouter>
<Redirect exact from="/" to="/login"/>
<Route exact path="/login" component={Login}/>
<Route exact path="/register" component={Register}/>
<Route exact path="/dashboard" component={Dashboard}/>
</HashRouter>
</div>
</React.Fragment>
And it works great, but after user is logged in I'm redirecting him to /dashboard where I want to nest other routes like /dashboard/foo or /dashboard/goo/
My dashboard component:
<React.Fragment>
<Sidebar/>
<div className="main--dashboard">
Here I want to render other components.
</div>
<button onClick={this.handleLogout}>Logout</button>
</React.Fragment>
Where <Sidebar/> is going to control which component should render next to the sidebar.
So my question is how to swtich routes and render appropriate components without affecting(Sidebar should be always present) <Sidebar/> component?

You can use like this
Dashboard.js
<React.Fragment>
<Sidebar>
<Login /> //as well <Register /> in Register.js
</Sidebar>
</React.Fragment>
Login.js
<div className="main--dashboard">
// Here you can render your components And also <Sidebar> remains as it is while redirects this.
</div>
<button onClick={this.handleLogout}>Logout</button>

How to load first menu item by default with a different Router Link

I have React Router setup in my Reactjs Project. The header Component has 4 different menu items. After login, I am getting only header component rendered but not first menu item component below it.
I have created a Homepage component which loads Header component and below that I gave Routes for different menu item pages. In the Header component for every Item, I linked it to the corresponding Item Page.
//Home Page Code.
<Router>
<Header />
<Route path='/Jobs' component={Jobs} />
<Route path='/Admin' component={Admin} />
<Route path='/Requests' component={Requests} />
</Router>

To use react router you have to wrap your routes in switch.
Switch will render the first item that matches the current route.
Because you have no switch, the routes are ignored.
To render a default site, change the path of the last route to / and it will match everything.
By setting it as last element, it will always be rendered, if no other route above matches the current route.
<Router>
<Header />
<Switch>
<Route path='/Jobs' component={Jobs} />
<Route path='/Admin' component={Admin} />
<Route path='/' component={Requests} />
</Switch>
</Router>
Hope this helps. Happy coding.

Try putting <Switch></Switch> container around your routes:
//Home Page Code.
<Router>
<Header />
<Switch>
<Route exact path='/' component={Home} />
<Route path='/Jobs' component={Jobs} />
<Route path='/Admin' component={Admin} />
<Route path='/Requests' component={Requests} />
</Switch>
</Router>
Edited: to add path for home (path='/')

How to use react-router to navigate component with multiple pages

Suppose that I have 2 pages and several components. The first page is the login page and the other page is the main menu. The login page only has 1 component. Once the user has logged into the website I want react-router to navigate to the main menu, the main menu has navbar and some components right down below. I want it to be able to navigate to each component and keep the navbar at the top all the time even the URL has been changed.
Here the code I've tried
// Inside the root component
<BrowserRouter>
<Route path="/menu" component={MenuForm}/>
<Route path="/login" component={LoginForm}/>
</BrowserRouter>
//Inside the menu page component
<Navbar/>
<Route path="/shop" component={Shop}/>
<Route path="/categories" component={Categories}/>
With this code, I can only navigate to menu page and login page, but I can not navigate to Shop and categories which are the child component of main menu

You need to have home page
<Route path="/home" component={Home}/> // all your menu and everything here
now if from home you want to go to menu
you can do like this
<Route path="/home/menu" component={Menu}/>
This component will render in home page where you set nested routes so matching route component will render
<Route path="/home/menu" component={menu}/>
<Route path="/home/profile" component={Profile}/>

I suppose you should consider creating container components. Where the first container will be containing your login routes namely "Auth Container", and the another components should be into the App routes namely "App Container". And you can have your own wrapper.
const AppRoutes = () => {
return (
<>
<Navigation scrolling={scrolling} />
<Switch>
<ProtectedRoute exact path="/profile" component={UserProfile} />
<ProtectedRoute exact path="/my-orders" component={MyOrders} />
<ProtectedRoute path="/my-saved-result" component={SavedResults} />
</Switch>
</>
)
}

If you are using react-router v4, you could you Switch component to declaratively define your routes like below:
import { Switch, Route, Redirect } from 'react-router-dom';
const MenuForm = () => (
<div className="app-routes">
<NavBar />
<Switch>
<Route exact path="/menu">
<Redirect to="/menu/shop" />
</Route>
<Route path="/menu/shop" component={Shop} />
<Route path="/menu/categories" component={Categories} />
</Switch>
</div>
);

I'm using like this
<div className="main-panel">
<Navbar />
<div className="content" style={{ backgroundColor: '#f4f3ef' }}>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/reports" component={ReportMain} />
<Route path="/showWebService" component={ShowWebService} />
</Switch>
</div>
</div>
The navbar is static when you navigate to link its only getting these component render.
<Link to="/reports">
<p>Reports</p>
</Link>
Call component with Link