React function - change url when page loads

Question

I am new to React.js and I am not sure how to handle this.

I did a selection with react where the selected option is passed by the link. I am also using the react router.

If no option is selected I want to redirect to the first option when the page loads.

function initTrainer() {

    for(let i = 0; i < trainer.length; i++) {
        trainer[i].link = "/trainer/" + trainer[i].firstName.toLowerCase() + "-" + trainer[i].lastName.toLowerCase();
        trainer[i].key = i;
    }

    if(window.location.pathname === "/") {
        // navigate("/trainer/")
    }
}

How can I redirect without a click in a normal function? Is there an easier solution to this problem?

Y I am using React Router V6 but I want to call navigate() conditionally.

Does this answer your question? How to do a redirect to another route with react-router? — Ricola
– Ricola, Commented Jul 17, 2022 at 13:06

Albert · Accepted Answer · 2022-08-09 20:21:56Z

2

You can use this code in your component to make it work:

const navigate = useState();

return (
  {() => navigate("/your-path")}
)

answered Aug 9, 2022 at 20:21

Albert

362 bronze badges

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

Comments

sulaimon-olaniran · Accepted Answer · 2022-07-17 13:12:31Z

1

Since you using react-router, you can use <Redirect>.. you can read about react-router Redirect here: React-Router-Redirect

answered Jul 17, 2022 at 13:12

sulaimon-olaniran

1962 silver badges6 bronze badges

Comments

Lakruwan Pathirage · Accepted Answer · 2022-07-17 13:29:26Z

1

When looking at your question, I think you are asking how navigate pragmatically in react. This can be done using react router. But depending on the react router version this is different.

In React Router v4 when you importing import { Route } from 'react-router-dom' your componet getting History object via props.so that you can nvigate,

this.props.history.push('/yourpath')

In React Router V5

You have to import below import statement where you are using the this pragmatically navigation.

import { useHistory } from "react-router-dom";

export default function home() {
  const history = useHistory();

//use this function to navigate
  function handleClick() {
    history.push("/yourpath");
  }


  return (
    <div>home</div>
  )
}

In In React Router V6

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

export default function home() {

  const navigate = useNavigate();
  //you can extrat route paramters using useParams hook
  const { id } = useParams();

//use this function to navigate
  function handleClick() {
    navigate("/yourpath");
  }


  return (
    <div>home</div>
  )
}

Additionally If you use next js latest version (V12)

import useRouter hook to your component ,

import { useRouter } from "next/router"; and run the hook inside the component using const router = useRouter();

then you can use router.push("/yourpath") to navigate desired path

edited Jul 17, 2022 at 13:29

answered Jul 17, 2022 at 13:18

Lakruwan Pathirage

6554 silver badges15 bronze badges

1 Comment

ahaMfM Over a year ago

Yes, I am using React Router V6 but I want to call navigate() conditionally.

Collectives™ on Stack Overflow

React function - change url when page loads

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related