when I click on the button the URL changes and it prints 'user exists' in the console, but the page is blank and doesn't show the component. I have been trying to figure out the problem for 2 days now but I can't seem to find a solution and hopefully someone here can help. This is the code:
import { Fragment, useState } from "react";
import { Route, Link, useHistory } from "react-router-dom";
import LoggedUser from "../pages/LoggedUser";
const ExitingUserButton = () => {
const [existingUser, setExistingUser] = useState(false);
let history = useHistory();
const loginHandler = () => {
setExistingUser(true);
console.log('user exists');
history.push('/logged-user');
};
return (
<Fragment>
{!existingUser ?
<Link type='Link' onClick={loginHandler} to='/logged-user'> existing user </Link>
:
<Route path='/logged-user' exact>
<LoggedUser />
</Route>
}
</Fragment>
)
}
export default ExitingUserButton;
import { Fragment } from "react";
const LoggedUser = () => {
return (
<Fragment>
<h1>Hello, user!</h1>
</Fragment>
);
};
export default LoggedUser;
You should wrap your Routes with a Switch.
Check the doc https://v5.reactrouter.com/web/guides/quick-start
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>