0

I'm following along the Serverless Stack guide which uses create-react-app.

My app is not routing to new pages.

Here's the relevant code:

// index.js
import { BrowserRouter as Router } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>
);

// App.js
import React, { useState, useEffect } from "react";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import "./App.css";
import Routes from "./Routes";
import { LinkContainer } from "react-router-bootstrap";
import { AppContext } from "./lib/contextLib";
import { Auth } from "aws-amplify";
import { useHistory } from "react-router-dom";

function App() {

  const history = useHistory();

  const [isAuthenticated, userHasAuthenticated] = useState(false);
  const [isAuthenticating, setIsAuthenticating] = useState(true);

  useEffect(() => {
    onLoad();
  }, []);

  async function onLoad() {
    try {
      await Auth.currentSession();
      userHasAuthenticated(true);
    }
    catch (e) {
      if (e !== 'No current user') {
        alert(e);
      }
    }

    setIsAuthenticating(false);
  }


  async function handleLogout() {
    await Auth.signOut();
    userHasAuthenticated(false);
    history.push("/login");
  }

  return (
    !isAuthenticating && (
      <div className="App container-fluid m-0 p-0">
        <Navbar collapseOnSelect bg="dark" expand="md" className="navbar-dark sticky-top bg-dark flex-md-nowrap shadow">
          <LinkContainer to="/">
            <Navbar.Brand className="font-weight-bold text-muted">
              Trade Blotter
            </Navbar.Brand>
          </LinkContainer>
          <Navbar.Toggle />
          <Navbar.Collapse className="justify-content-end">
            <Nav activeKey={window.location.pathname}>
              {isAuthenticated ? (
                <Nav.Link onClick={handleLogout}>Logout</Nav.Link>
              ) : (
                <>
                  <LinkContainer to="/signup">
                    <Nav.Link>Signup</Nav.Link>
                  </LinkContainer>
                  <LinkContainer to="/login">
                    <Nav.Link>Login</Nav.Link>
                  </LinkContainer>
                </>
              )}
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        <AppContext.Provider value={{ isAuthenticated, userHasAuthenticated }}>
          <Routes />
        </AppContext.Provider>
      </div>
    )
  );
}

export default App;

// Routes.js

import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./containers/Home";
import NotFound from "./containers/NotFound";
import Login from "./containers/Login";
import Signup from "./containers/Signup";

export default function Routes() {
    return (
        <Switch>
            <Route exact path="/login">
                <Login />
            </Route>
            <Route exact path="/signup">
                <Signup />
            </Route>
            <Route exact path="/">
                <Home />
            </Route>
            <Route>
                <NotFound />
            </Route>
        </Switch>
    );
}

And finally the versions:

// package.json
{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "aws-amplify": "^4.3.21",
    "react": "^18.1.0",
    "react-bootstrap": "^1.6.1",
    "react-dom": "^18.1.0",
    "react-icons": "^4.2.0",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "sst-env -- react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@serverless-stack/static-site-env": "^1.0.0"
  }
}

I'm clearly new with React and have tried debugging in the consol, using HashRouter, editing the Webpack config file and various code changes.

Where is my bug?

Jason Strimpel
  • 14,670
  • 21
  • 76
  • 106
  • 1
    Does this answer your question? https://stackoverflow.com/a/71833424/8690857 It was a question about `Link`s, but I think it's applicable to navigation actions in general with React 18 and `react-router-dom@5`. – Drew Reese May 05 '22 at 06:03
  • Thank you for the comment. I'm getting a TypeError in LinkContainer.js now. Seems that react-router-dom does not have the withRouter method and LinkContainer is calling it. – Jason Strimpel May 05 '22 at 06:41
  • Correct. `withRouter` was removed in RRDv6. Is your code using `withRouter` or is this a dependency thing with `react-router-bootstrap`? – Drew Reese May 05 '22 at 06:43
  • Maybe. Maybe not. [react-router-bootstrap](https://github.com/react-bootstrap/react-router-bootstrap/blob/master/package.json#L78) has a dependency on `"react-router-dom": "^6.2.2",`. Try version `"0.26.1"` of `react-router-bootstrap`? Yes, it seems `react-router-bootstrap` v0.25.0 has a dependency on `react-router-dom@4` https://github.com/react-bootstrap/react-router-bootstrap/blob/v0.25.0/package.json#L81 – Drew Reese May 05 '22 at 06:45
  • This was exactly it. react-router-bootstrap we dependent on .withRouter. Updating to latest sorted it. Thanks mate. About 4 hours on this. – Jason Strimpel May 05 '22 at 06:53
  • No worries. Glad to help. Cheers and good luck. – Drew Reese May 05 '22 at 06:55

0 Answers0