在我的路由器/路由和导航栏之外使用登录组件

Question

为了学习react，我创建了一个Navbar，其中包含指向App.tsx中路由的简单链接列表。由于它目前正在工作，我的所有组件都显示Navbar。包括登录组件，这不是我想要的。

当应用程序启动时，我正在寻找的行为将显示没有Navbar的登录组件，因此路径"/&"；。然后，一旦他们点击登录按钮；将它们登录"；并使用导航栏显示默认组件，并允许他们在应用程序中移动。

在我进入状态部分之前，我需要知道如何首先实现这一点。我尝试在App.tsx中重新安排导航栏位置，但没有成功(导航栏包含链接，所以它必须在路由器内(。所有其他路线也需要导航栏，所以把它放在第一位是有意义的，除了登录(或我不想包括导航栏的任何其他页面(。

我将省略Navbar组件，因为它只有链接。但我的应用程序组件看起来是这样的，希望这足以解释我缺少的东西：

App.tsx:
import * as React from "react";
import { useState } from "react";
import "./index.css";
import {
BrowserRouter as Router,
Switch,
Route,
Redirect,
} from "react-router-dom";
import Navbar from "./components/Navbar";
import VisitLog from "./components/VisitList";
import Dashboard from "./components/Dashboard";
import Profile from "./components/Profile";
import Login from "./components/Login"
export default function App() {
const [loggedIn, setLoggedIn] = useState(false);
return (
<div>
<Router>
<Navbar />
<Switch>
<Route exact path="/" />
<Route path="/profile" component={Profile} />
<Route path="/visits" component={VisitLog} />
<Route path="/dashboard" component={Dashboard} />
<Route path="/login" component={Login} />
</Switch>
</Router>
</div>
);
}

我需要彻底修改我的导航栏和路线吗？或者有一种相对简单的方法来例外哪些组件可以看到导航栏？

此外，我对其他想法持开放态度，以达到类似的效果。在任何网站上，如果没有登录，显示登录页面只是一种标准做法，但我找不到太多用于显示导航栏的内容。

很简单。我一定是错过了什么。

谢谢！

Answer 1

如果用户未登录并将其重定向到'/login'路径，则避免渲染导航栏会怎样。

return (
<div>
<Router>
{lodggedIn ? <Navbar /> : <Redirect to="/login"/>}
<Switch>
<Route path='/login' component={() => <Login setLogin={(islogged)=> setIslogged(isLogged)}/>}/>            
</Switch>
</Router>
</div>
);

在Login组件中，您将登录尝试的结果传递给props中的setLogin函数。示例：

function attemptLogin(){
let result = get login results
this.props.setLogin(result);
}