Reactjs 我无法让我的登录页面在我点击“后消失”；“登录”；

我已经创建了名为“LoginForm”、“Navbar”、“Home”、“About”和“Contact”的文件，这些文件都有各自的基本组件

当我尝试将它们全部呈现到我的应用程序中时，我希望首先显示登录屏幕。然后我把它设置到我点击“登录”的地方，它应该链接到我的主页，在那里导航栏可以被访问和切换

由于某种原因，我可以在单击“登录”时访问主页，但登录屏幕不会消失

下面是我的代码，每个页面的路由和指定确切路径的开关

import React, { Component } from 'react';
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import './App.css';
import LoginForm from './components/LoginForm';
import Navbar from './components/Navbar';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

class App extends Component {
render() {
    return (
        <div className="container">
        <Router>
            <Route path="/" component={LoginForm} />
                <Navbar />
                    <Switch>
                        <Route path="/" exact component={Home} />
                        <Route path="/Home" exact component={Home} />
                        <Route path="/About" exact component={About} />
                        <Route path="/Contact" exact component={Contact} />
                    </Switch>
        </Router>
    </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route}；
导入“/App.css”；
从“./components/LoginForm”导入LoginForm；
从“./components/Navbar”导入Navbar；
从“./components/Home”导入Home；
从“./components/About”导入关于；
从“./components/Contact”导入联系人；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

您有两个路径相同的路由，当路径为“/”时，将始终呈现：

开关将渲染与路径匹配的第一个子路由，因此这也将渲染：

<Route path="/" exact component={Home} />

---

您有两个路径相同的路由，当路径为“/”时，将始终呈现：

开关将渲染与路径匹配的第一个子路由，因此这也将渲染：

<Route path="/" exact component={Home} />

---

您不能更改交换机组件外部的路由

请尝试以下代码：

<Router>
                <Navbar />
                    <Switch>
                        <Route exact path="/" component={LoginForm} />
                        <Route path="/Home" component={Home} />
                        <Route path="/About" component={About} />
                        <Route path="/Contact"component={Contact} />
                    </Switch>
        </Router>

如果你需要使用链接，你需要把你的路线放在交换机里面。 你有两条回家的路

---

使用一个精确路径

您不能在交换机组件外部更改路由

请尝试以下代码：

<Router>
                <Navbar />
                    <Switch>
                        <Route exact path="/" component={LoginForm} />
                        <Route path="/Home" component={Home} />
                        <Route path="/About" component={About} />
                        <Route path="/Contact"component={Contact} />
                    </Switch>
        </Router>

如果你需要使用链接，你需要把你的路线放在交换机里面。 你有两条回家的路

---

使用一条精确的路径

然而，当我坚持反复尝试时，我实际上偶然发现了这个解决方案。现在的问题是，一切都按预期进行，除了“登录”页面第一次出现时，我无法摆脱导航栏。只有在单击“登录”或更改URL后，登录屏幕才会消失。您想在登录后显示导航栏吗？我只想在导航到页面时显示登录屏幕，单击“登录”后，我想登录屏幕消失，只留下导航栏和网站显示。到目前为止，导航栏显示在登录屏幕上。在这种情况下，您需要将NavBar组件放在其他组件中，这是唯一的解决方案。我想我该怎么做呢？实际上，在我坚持尝试和错误的过程中，我偶然发现了这个解决方案。现在的问题是，一切都按预期进行，除了“登录”页面第一次出现时，我无法摆脱导航栏。只有在单击“登录”或更改URL后，登录屏幕才会消失。您想在登录后显示导航栏吗？我只想在导航到页面时显示登录屏幕，单击“登录”后，我想登录屏幕消失，只留下导航栏和网站显示。到目前为止，导航栏显示在登录屏幕上。对于这种情况，您需要将导航栏组件放在其他组件中，这是唯一的解决方案，我想我该怎么做？