React中Switch路由跳转后地址更新但组件不渲染问题求助

• react-router-dom的Switch组件仅会渲染第一个与当前路径匹配的子节点，未设置path属性的普通组件会被判定为永久匹配。
• 你将<Header>放在Switch的第一个子节点位置，无论跳转至什么路径，Switch都会先匹配到Header并停止后续路由匹配，因此路由对应的组件永远不会被渲染。

将全局公共的Header组件挪到Switch组件外部即可，Header不需要参与路由匹配逻辑，放在外层可以保证所有路由页面都能正常展示导航栏。

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>
          {/* Header移到Switch外部 */}
          <Header login={login}  />
          <Switch>
                <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;

• Header组件需要先从react-router-dom引入Link组件才能正常使用路由跳转功能，检查你的Header代码是否遗漏了该导入语句。
• 如果你的项目使用的是react-router-dom v6版本，Switch已经被替换为Routes组件，且路由写法有调整，需要对应修改代码。

内容的提问来源于stack exchange，提问作者Yasaman Forouzesh