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?