反应路由似乎有效，但它不会呈现页面

Question

当我点击按钮时，URL改变了，它在控制台中打印'user exists'，但是页面是空白的，不显示组件。我一直试图找出这个问题2天了，但我似乎找不到解决方案，希望有人在这里可以帮助。这是代码:

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;

Answer 1

您应该用Switch包装您的Routes。查看文档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>