I was using react-router and wanted to stop the URL from changing, kind of one common URL for every screen except the default one and the first thing I learned was about Memory Router it said that it does not read or write to address bar.
The problem I faced using Memory Router was first, the back button of the browser didn't work, and second, since it cannot read or write to the address bar the react component linked to the default path which should only be opened with '/', was opening with any path.
//Routes.js
import React from 'react';
import { MemoryRouter as Router, Switch, Route } from 'react-router-dom';
import HomePage from './HomePage';
import About from './About';
import DashBoard from './DashBoard';
const Routes = () => {
return (
<>
<Router>
<Switch>
<Route exact path='/'>
<HomePage />
</Route>
<Route exact path='/about'>
<About />
</Route>
<Route exact path='/dashboard'>
<DashBoard />
</Route>
</Switch>
</Router>
</>
);
};
export default Routes;
The issue in the above code is we can open HomePage with either '/' or '/jhkjbdv/' or '/hdcubv/dhhvd/dkfhd' and I don't know how to manage this thing.
//same as above replace MemoryRouter with BrowserRouter
//Routes.js
const Routes = () => {
return (
<>
<Router>
<Switch>
<Route exact path="/">
<HomePage />
</Route>
<Route exact path="/yourapplication">
<AllPage />
</Route>
</Switch>
</Router>
</>
);
};
export default Routes;
//HomePage.js
import React from 'react';
import { Link } from 'react-router-dom';
const HomePage = () => {
return (
<>
<div>
<Link
to={{
pathname: `/yourapplication`,
state: {
getby: "about"
}
}}
>
About
</Link>
<hr />
<Link
to={{
pathname: `/yourapplication`,
state: {
getby: "dashboard"
}
}}
>
DashBoard
</Link>
</div>
</>
);
};
export default HomePage;
//AllPage.js
import React from "react";
import { useLocation } from "react-router-dom";
import About from "./About";
import DashBoard from "./DashBoard";
const AllPage = () => {
let { state } = useLocation();
const switchTabs = () => {
switch (state.getby) {
case "about":
return <About />;
case "dashboard":
return <DashBoard />;
default:
return <></>;
}
};
return <>{switchTabs()}</>;
};
export default AllPage;
Using BrowserRouter and useLocation hook I was able to reduce the routes, as which component should be rendered is managed in a separate component i.e. AllPage
Top comments (0)