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 configure the Routes in Sidebar navigation after Login page in React?

I am designing a users dashboard in React, wherein User logs in and navigate to his dashboard with other links such as Archived, Profile and Settings. My Login and then Navigating to HomePage is working fine.
I have designed the Dashboard, Archived, Profile and Settings Page Links in Sidebar. Now when I am navigating to the Links. It takes me to a new URL path and my Sidebar disappears. I want my sidebar to still appear on all pages as long as I am logged in.
Below is my App.js where I have designed the upper level route:
return (
<div>
<Router history={history}>
<Switch>
<PrivateRoute exact path="/" component={HomePage} />
<Route path="/login" component={LoginPage} />
<Route path="/register" component={RegisterPage} />
<Redirect from="*" to="/" />
</Switch>
</Router>
</div>
);
Once User is on HomePage, I need the dashboard and other links to show. and when User clicks on any Sidebar link, Sidebar should still be there while the other page opens. So I added the inner Routes to the HomePage.jsx like this:
return (
<div>
<Router history={history}>
<Sidebar />
<Switch>
<Route path="/" component={Dashboard} />
<Route path="/archived" component={ArchivedPage} />
<Route path="/profile" component={ProfilePage} />
<Route path="/settings" component={SettingsPage} />
{/* <Redirect from="*" to="/" /> */}
</Switch>
</Router>
</div>
);
But it doesn't work. Can anyone please help me understanding if this is correct. or how can I achieve the required result.
Please let me know if you need any other details.
Thank you.

Issue
The issue is that you are exactly matching "/" to render HomePage, but then as soon as the path is any deeper, like "/archived", it no longer exactly matches and HomePage is unmounted.
You should not render a Router within another Router, you need only one router per app to provide the routing context.
Solution
Remove the inner router (and any other nested routers!!). Remove the exact prop on the "/" path and reorder the routes to specify the more specific paths before less specific paths so the Switch can actually do its job and match and render the appropriate route.
App
Reorder the more specific "/login" and "/register" paths to be matched prior to the less specific "/" path. If you had, for example, a "/login/google" path, this is more specific than "/login" and would be ordered earlier.
return (
<div>
<Router history={history}>
<Switch>
<Route path="/login" component={LoginPage} />
<Route path="/register" component={RegisterPage} />
<PrivateRoute path="/" component={HomePage} />
<Redirect to="/" />
</Switch>
</Router>
</div>
);
HomePage
Move the Dashboard to the last route position so if no other route above it is matched and returned then the dashboard is matched and rendered.
return (
<div>
<Sidebar />
<Switch>
<Route path="/archived" component={ArchivedPage} />
<Route path="/profile" component={ProfilePage} />
<Route path="/settings" component={SettingsPage} />
<Route component={Dashboard} />
</Switch>
</div>
);

in first place your doing something wrong you cant put a Router inside a Router,
you haver a Router in app then inside a component that is inside of app you have another Router thats a problem i dont know if that solves your problem but try it just delete Router in homepage

React Router: How to keep a param in the URL when clicking on a Link

I'm using React Router v5.2 in my project. Browser Router looks like this:
<BrowserRouter>
<Navbar />
<Switch>
<Route path={"/sitemap", "/sitemap/:param?"} exact>
<Sitemap />
</Route>
<Route path={"/", "/:param?"} exact>
<Home />
</Route>
<Route path="/" render={() => <div>404</div>} />
</Switch>
<Footer />
</BrowserRouter>
The Link to navigate:
<Link to="/sitemap">Sitemap</Link>
Clicking the link obviously overwrites the param if my URL is like "mysite.com/param" this and turns it into "mysite.com/sitemap". But my question is, how would I make it "mysite.com/sitemap/param" from the link? I tried adding the history.location.pathname when adding the link, but it would look like "mysite.com/sitemap/sitemap/param" if I press it again...
And when clicking on the home button it should only show again "mysite.com/param".
Any help would be greatly appreciated!

You can use useParams() to save params and pass it to other link.
Please refer this link to test the URL.

How do I create a multiple page app with a login component in react?

Recently I've tried building a web platform trough React. Everything's fine, everything's work ecc.
But I've run in many problems when I tried to create a different page for the user login:
I already had Routes in my code, so when I tried to add other Routes to another js file they simply didn't work.
I have no clue how to do the authentication in react router, I've tried in many ways, followed many tutorials but nothing worked out.
<Switch>
<Route exact path='/' component={Feed}/>
<Route path="/user" component={Profilo}/>
<Route path='/explore-page' component={ExplorePage} />
<Route path='/events-page' component={EventsPage} />
<Route path='/calendar-page' component={CalendarPage} />
<Route path='/stats-page' component={StatsPage} />
<Route path='/form' component={FormPage}/>
<Route path="/user" component={Profilo}/>
<Route path="/user/:userId" component={Profilo} />
</Switch>
This is all the routes I'm currently using inside a div to get the react component rendered.
As I said before adding other routes in an upper file wouldn't give me a response.
So, in the end, I'm gonna ask you where should I put the route for the login and the home? In there or I should just moving everything?
Thank you in advance.

One simple way is adding the logic to handle authentication in your render function.
If the user is not authenticated. Redirect to the login page. Otherwise, go to your component
render() {
if (!this.props.isAuth) {
return (
<Switch>
<Route exact path="/" component={Login} />
<Redirect to="/" />
</Switch>
);
}
return (<Switch>
<Route
// your router
/>
</Switch>);
}

React Router Default Route Redirect to /home

I am very new to react and and the router and bootstrap libraries I chose to use. They are basically just react-router-bootstrap. I am just getting a feel for things and I want to make a web app that has some basic url navigation. I have 4 parts, home browse add and about, clicking on the links works well, and so do the routes, but when navigate to the default route the handler works okay in that it shows the Home component, but does not make the home button active in the nav. I am a bit stuck and wondering if anyone can help me out? I would like to make that home part active at the '/ ' default route, and was thinking I could just redirect to '/home' and let the rest take care of it, however it doesn't look like I can add a path prop to DefaultRoute. So I was curious if anyone had any ides? Also curious if this looks like the right way to build something like I am building.
I made a gist that is HERE
Thanks to all ahead of time!!!

The only change that I made was to your routes, they used to look like this:
var routes = (
<Route handler={App} >
<DefaultRoute handler={Home}/>
<Route name="home" handler={Home} path="/home">
</Route>
<Route name="browse" handler={Browse} path="/browse">
</Route>
<Route name="add" handler={Add} path="/add">
</Route>
<Route name="about" handler={About} path="/about">
</Route>
</Route>
);
and I changed them to this:
var routes = (
<Route handler={App} >
<DefaultRoute name="home" path="/" handler={Home}/>
<Route handler={Home} path="/home">
</Route>
<Route name="browse" handler={Browse} path="/browse">
</Route>
<Route name="add" handler={Add} path="/add">
</Route>
<Route name="about" handler={About} path="/about">
</Route>
</Route>
);
I tested it and it works as expected. When you visit the home page the url only has the /#/ and is not suffixed like /#/home, I don't think that is an issue.