反应中的切换路线不起作用，它不会呈现页面。它改变了http链接但它不呈现页面？

Question

我想尝试在 react 中切换路由，但它不起作用。它不呈现页面。当我单击路由时，它会更改链接，但不会呈现组件。我使用 header 来导航我的路线，并在 Header 文件中使用了 Link。

import Login from "./components/Login"
import Header from "./components/Header"
import Home from "./components/Home"
import {BrowserRouter as Router , Route, Switch } from "react-router-dom"
import { useState } from 'react';
import Logout from './components/Logout'
import Signup from './components/Signup';
function App() {
    const [login,setLogin] = useState(false)
    console.log("login in App: ",login)
    const loginStatus = ()=>{
        console.log("login in App and function: ",login)
        setLogin(!login)
        return "made it"
    }
    return (
        <Router>
        <Switch>
                <Header login={login}  />
                <Route exact path="/">
                    <Home />
                </Route>
                <Route path="/Login">

                    <Login method={loginStatus}/>
                </Route>
                <Route path="/Signup">
                    <Signup />
                </Route>
                <Route path="/Logout" >
                    <Logout method={loginStatus} />
                </Route>
        </Switch>
       </Router>
    );
}

export default App;

export default function Header(props){
  console.log("login in Header", props.login)
  let login = props.login
    return(<>
    <Navbar variant="dark" bg="dark" expand="lg">
        <Container fluid>
            <Navbar.Brand ><Link to="/" className="NavBar">Book_Club</Link></Navbar.Brand>
            <Nav>
              <Nav.Item >
                
                <Nav.Link ><Link to={login === true ?"/Logout": "/Login"} className="NavItem">{login === true ? "Logout" : "Login"}</Link></Nav.Link> 
              </Nav.Item>
              <Nav.Item >
                <Nav.Link className="NavItem"><Link to="/Signup" className="NavItem">Signup</Link></Nav.Link>
              </Nav.Item>
            </Nav>
        </Container>
    </Navbar>

Answer 1

将第一条路由<Route exact path="/"> <Home /></Route>移到Switch末尾的注销路由下方。我想这应该可以解决问题，因为您的场景中的 React-router 将匹配 /Anything 作为 / 最终主页将呈现，仅此而已。

Answer 2

尝试将<Header /> 组件移到<Switch></Switch> 组件之外。一般来说，您只需要在 Switch 组件中使用 Routes。