React router v6 programmatically redirect

Question

I am in /customerOrders/13 page and from there I try to redirect to /customerOrders/14 using navigate('/customerOrders/14'). Even though the URL is updated, page is not redirected to /customerOrders/14.

Below are code fragments I extracted related to this from the codebase.

App.js

import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";
...
<BrowserRouter>
    <Routes>
        <Route path="customerOrders/:id" element={<CustomerOrderForm />}></Route>
    </Routes>
<Router>

CustomerOrderForm.jsx

import { useNavigate  } from "react-router-dom";
...

const CustomerOrderForm = () => {
    let navigate = useNavigate();

    const save = async () => {
        //
        // logic to persist data goes here...
        //

        navigate(`/customerOrders/${customerOrderId}`);
    }
    ...
}

Please add the code of the component that is rendered with route customerOrder/14. If you are using useEffect in that component, add the id param from route as a dependency to useEffect. — Mohit Kushwaha
– Mohit Kushwaha, Commented Jan 25, 2022 at 6:02
use import { useNavigate } from 'react-router-dom'; const history = useNavigate();` then history('...'); — Sangeet Agarwal
– Sangeet Agarwal, Commented Jan 25, 2022 at 6:03
@SangeetAgarwal I tried this before and I got error: useNavigate() may be used only in the context of a <Router> component. — Lakmal Premaratne
– Lakmal Premaratne, Commented Jan 25, 2022 at 8:11
@MohitKushwaha I imported import { useParams } from "react-router-dom"; and then let id = useParams().id;. Id is fetched already... but the problem is I cannot redirect from this page to another. — Lakmal Premaratne
– Lakmal Premaratne, Commented Jan 25, 2022 at 8:13
@MohitKushwaha I updated the question with code as you requested. I removed history as well. I read this SO question and still no luck. — Lakmal Premaratne
– Lakmal Premaratne, Commented Jan 25, 2022 at 9:21

Drew Reese · Accepted Answer · 2022-02-02 01:25:51Z

20

When you are on a given route:

<Route path="customerOrders/:id" element={<CustomerOrderForm />} />

and navigating to the same route already rendering the mounted component then the component needs to "listen" for changes to the route, in this case, specifically the id route match param that is updated. Use an useEffect hook with a dependency on the id route match param to rerun any logic depending on it.

import { useNavigate, useParams } from "react-router-dom";

...

const CustomerOrderForm = () => {
  const navigate = useNavigate();
  const { id } = useParams();

  useEffect(() => {
    // rerun logic depending on id value
  }, [id]);

  const save = async () => {
    //
    // logic to persist data goes here...
    //

    navigate(`/customerOrders/${customerOrderId}`);
  };

  ...

};

answered Feb 2, 2022 at 1:25

Drew Reese

207k20 gold badges281 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roman · Accepted Answer · 2023-05-04 04:24:21Z

This solution is independent of whether you are redirecting inside a component or not:

// 1. history.ts
import { createBrowserHistory } from 'history'
export const history = createBrowserHistory()

// 2. index.tsx
import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
import { history } from './history.ts'

root.render(
  <HistoryRouter history={history}>
     </div>Hello React Router Redirect Feature</div>
  </HistoryRouter>
);

// 3. Your handle function
import { history } from './history.ts'

const getRedirected = (pathNext = '/') => {
  historyObject.push(pathNext);
  // or
  // historyObject.replace('/');
}

My environment:
"react": "18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.11.0",
"history": "^5.3.0"

Now you can use the history object in any non-react component function

Collectives™ on Stack Overflow

React router v6 programmatically redirect

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related