React 中的切换路由不起作用，并且不呈现页面。它更改了 http link 但它不呈现页面？

Question

我想尝试在 React 中切换路由，但它不起作用。它不呈现页面。当我点击路线时，它会改变 link 但它不会呈现组件。我使用 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。

React 中的切换路由不起作用，并且不呈现页面。它更改了 http link 但它不呈现页面？

Switch route in react doesn't work and it doesn't render pages. It changes http link but it doesn't render page?

javascript

routes

reactjs

react-router

react-router-dom