时间戳

首页 > 解决方案 > 点击“登录”后，我的登录页面无法消失

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;

标签： reactjsreact-routernavbar

解决方案

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

<Route path="/" component={LoginForm} />

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

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

推荐阅读