0

Im working with React router. My app.js looks like the following -

<div className="App">
    <Router history={history}>
      <div>
        <Switch>
            <Route exact path="/">
              <HomePage history={history}/>
            </Route>
            <Route path="/dashboard">
              <LinkBoardPage />
            </Route>
            <Route>
              "404 Not Found"
              <a href="/dashboard">
                Click here to get back to the dashboard
              </a>
            </Route>
        </Switch>
      </div>
      </Router>
  </div>

In my function after performing login, I wanted to reroute to the /dashboard page using history.push and my code looks like this -

const responseSuccessGoogle = (response) => {
    console.log("Successfully logged in");
    axios({
        method: "POST",
        url: "http://localhost:3001/api/googlelogin",
        data:{ tokenId: response.tokenId }
    }).then(async (response) => {
        await props.storeUser(response.data);
        console.log(response.data);
        console.log("Before - ", window.location.pathname);
        await props.history.push("/dashboard");
        console.log("After - ", window.location.pathname);
    });
}

However, even though the browser goes to the uri, /dashboard it doesnt load correctly and loads 404 not found instead. However, when I refresh the page, it routes correctly and loads the dashboard.

Is there something Im missing with my routing?

responseSuccessGoogle is called here -

return (
    <div className="LoginBox"><br />
        <div className="FormTitle"><h3>Login</h3></div><br />
        <div className="LoginButton">
            <GoogleLogin
                clientId="somerandomclientid"
                buttonText="Login with Google"
                onSuccess={responseSuccessGoogle}
                onFailure={responseErrorGoogle}
                cookiePolicy={'single_host_origin'}
            />
        </div>       
    </div>   
);
Amitesh
  • 1
  • 1
  • Where is `responseSuccessGoogle ` being invoked? What is the `history` reference being passed around? Are you not using the one provided via [route props](https://reactrouter.com/web/api/Route/route-props)? – Drew Reese Oct 11 '20 at 18:25
  • responseSuccessGoogle is a callback function that gets invoked when GoogleOAuth login is successful. history is the same as the one provided via route props. ``` import {createBrowserHistory} from 'history'; export default createBrowserHistory(); ``` this file is imported as history in app.js. I did this explicitly so that I could use history in multiple places independently in the future if I needed to. – Amitesh Oct 11 '20 at 18:42
  • How did you import `Router`? – Ajeet Shah Oct 11 '20 at 18:46
  • Sorry, I meant where, not when, is `responseSuccessGoogle` called? Sure, you can use `history` independently, but is it the same instance, or have you created multiple instances? Why not just use the one provided by the router context? Seems completely unnecessary to use *other* history objects here in the router. – Drew Reese Oct 11 '20 at 18:48
  • I updated the question to answer your question Drew. Ajeet, I imported the router as follows -import { Router, Switch, Route, } from "react-router-dom"; – Amitesh Oct 11 '20 at 19:00
  • used this tutorial for using history separately instead of the one provided https://medium.com/@bcantello/using-history-to-navigate-your-react-app-from-outside-a-component-40ea74ba4402 – Amitesh Oct 11 '20 at 19:01
  • Interesting, that blog/tutorial doesn't even use a valid example react component to illustrate their point about route props, nor when and how they may be overridden. So is it safe to assume that "LoginBox" is being rendered by the `HomePage` then? Can you reproduce this behavior into a *running* codesandbox and link here? – Drew Reese Oct 11 '20 at 19:32
  • @Amitesh Routing looks correct. It should work, If you are still facing issue, provide a minimal code at [sandbox](https://codesandbox.io/). – Ajeet Shah Oct 12 '20 at 07:27

0 Answers0