React - Navigating between urls without page loading

user_5043894 0
Viewed 66

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

react-router reactjs javascript
3 Answers

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}`
})
user_114564750

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

In your case I suggest to address the issue using this kind of relative pathname: "../../../issue/this.state.issue.id". This way you are able to navigate with react-router to the path you want relatively to the current path. You were on the right track by using the relative path:

this.props.history.push({
     pathname: "issue/" + this.state.issue.id
})

You had just to tell it to go 3 steps back.

user_134789930
Related