如何在 React.JS 中更改登录/注销时的导航栏文本？

Question

我的项目中有一个导航栏，我从内部调用它App.js。根据我是否登录，我想呈现不同的视图NavBar。如果登录，我希望NavBar有一个注销按钮。如果注销，我希望NavBar有登录按钮。我使用令牌来localStorage检查我是否登录。登录后，令牌存在于localStorage. 注销/登录前，.txt 文件中没有令牌密钥localStorage。我将此令牌作为状态传递给NavBar如下所示：

export default function App() {
   const [loggedIn, setLoggedIn] = useState(localStorage.getItem("token"));
   return (
      <div>
         <Router>
            <Navbar isAuth={loggedIn} />
            <Route exact path="/" exact component={Home} />
            <Route path="/login" component={Login} />
            <PrivateRoute path="/dashboard" component={Dashboard} />
         </Router>
      </div>
   );
} 

现在，从NavBar组件中，我使用此道具来渲染不同的视图，NavBar如下所示：

const NavBar = props => {
   const classes = useStyles();

   if (props.isAuth !== null) {
      return (
         <div className={classes.root}>
            <AppBar position="static">
               <Toolbar>
                  <Typography variant="h6" className={classes.title}>
                     <Link
                        href="/"
                        style={{ textDecoration: "none", color: "white" }}
                     >
                        Timetracker
                     </Link>
                  </Typography>
                  <Link href="/" style={{ color: "white" }}>
                     <Button color="inherit" onClick={auth.logout}>
                        Logout
                     </Button>
                  </Link>
               </Toolbar>
            </AppBar>
         </div>
      );
   } else {
      return (
         <div className={classes.root}>
            <AppBar position="static">
               <Toolbar>
                  <Typography variant="h6" className={classes.title}>
                     <Link
                        href="/"
                        style={{ textDecoration: "none", color: "white" }}
                     >
                        Timetracker
                     </Link>
                  </Typography>
                  <Link href="/login" style={{ color: "white" }}>
                     <Button color="inherit">Login</Button>
                  </Link>
               </Toolbar>
            </AppBar>
         </div>
      );
   }
};

export default NavBar;

问题是，NavBar我登录后不会立即更新。我必须手动刷新页面才能呈现新的NavBar. 同样，在注销时，它不会自行更新，仅在手动刷新时更新。这是什么问题以及如何解决这个问题？

Answer 1

<Switch>您也需要添加。从文档中：

渲染第一个子项或与位置匹配的子项。

<Switch>其独特之处在于它专门渲染一条路线。相反，每个<Route>与位置匹配的内容都包含在内地渲染。

就像下面这样：

<Router>
  <Switch>
     <Navbar isAuth={loggedIn} />
     <Route exact path="/" exact component={Home} />
     <Route path="/login" component={Login} />
     <PrivateRoute path="/dashboard" component={Dashboard} />
  </Switch>
</Router>

在这里进一步阅读：路由器

我希望这有帮助！