how do i redirect to root url when i reload a page in react js

Question

App.js

function App(props) {
  console.log(props, "Check Props Here");

  return (
    <div className="d-flex ht-pct-100">
     
      <div className="flex-one">
        
        <div className="flex-one main-content-box" style={{ height: "calc(100% - 55px)" }}>
          <div className="arrow-navigation" style={{ top: topPosition }}></div>
          <Switch>
            <Route exact path="/" render={() => <DashBoard store={main} />} />
            <Route exact path="/newprocess" render={() => <div>DEFG</div>} />

          </Switch>
        </div>
      </div>
    </div>
  );
}

Right now when m clicking on new process it goes to new process page but when i reload the page it stays in the same page. i want to send it to "/" which is the first route. posting the question again for a proper answer. Thanks!

Ankit Saxena · Accepted Answer · 2022-03-09 07:41:49Z

1

The URL will remain same when you refresh the page. It's the browser's behaviour (not related to react js). But you can Programmatically navigate to a specific route using useHistory provided by react-router-dom.

For example:

function MyButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/");
  }

  return (
    <button type="button" onClick={handleClick}>
       New process
    </button>
  );
}

Check here in the offical doc. for more info - Documentation Link

answered Mar 9, 2022 at 7:41

Ankit Saxena

1,1971 gold badge8 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

how do i redirect to root url when i reload a page in react js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related