I am building a website using react. I have a url http://0.0.0.0:9000/courseware/course/6/content/programming/issues/lab/1 which shows a list of issues belonging to a lab of id 1.
When I click on an issue (eg, 22), I want the url to become http://0.0.0.0:9000/courseware/course/6/content/programming/issue/22.
I tried doing this
this.props.history.push({
pathname: "issue/" this.state.issue.id
})
but then the url would become /programming/issues/lab/1/issue/22
I tried doing this
const history = useHistory();
history.goBack();
this.props.history.push({
pathname: "issue/" this.state.issue.id
})
but there is a react hook error
Then I tried doing
this.props.history.goBack();
this.props.history.push({
pathname: "issue/" this.state.issue.id
})
but this is navigating the page and the below push function doesn't work.
First, Am I dealing with the urls in right way? If yes, then How do I solve this problem?
I am assuming I have to use history to navigate between urls without actually reloading the page.
Thanks in Advance
CodePudding user response:
The only way you can achieve this is by adding /
before the url and appending the id to the whole url. This way react router will know that you're inserting a absolute url path not the relative one.
this.props.history.push({
pathname: `/courseware/course/${some-id}/content/programming/issue/${this.state.issue.id}`
})
CodePudding user response:
Use react-router-dom it's much easier.
Firstly,
npm i -D react-router-dom
Basic Usage
index.js:
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="blogs" element={<Blogs />} />
<Route path="contact" element={<Contact />} />
<Route path="*" element={<NoPage />} />
</Route>
</Routes>
</BrowserRouter>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
Example Explained
We wrap our content first with <BrowserRouter>
.
Then we define our <Routes>
. An application can have multiple <Routes>
. Our basic example only uses one.
<Route>
s can be nested. The first <Route>
has a path of / and renders the Layout component.
The nested <Route>
s inherit and add to the parent route. So the blogs path is combined with the parent and becomes /blogs.
The Home component route does not have a path but has an index attribute. That specifies this route as the default route for the parent route, which is /.
Setting the path to * will act as a catch-all for any undefined URLs. This is great for a 404 error page.
Pages / Components
The Layout component has and elements.The <Outlet>
renders the current route selected.
<Link>
is used to set the URL and keep track of browsing history.
Anytime we link to an internal path, we will use <Link>
instead of <a href="">
.
The "layout route" is a shared component that inserts common content on all pages, such as a navigation menu.
Layout.js:
import { Outlet, Link } from "react-router-dom";
const Layout = () => {
return (
<>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/blogs">Blogs</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Outlet />
</>
)
};
export default Layout;