Reactjs 如何在react js中创建独立于其他单页应用程序的登录页

我已经用reactjs创建了一个单页应用程序，我有一个“联系”页面，在那里我可以获得客户信息，我需要创建一个登录页面，允许管理员只查看客户信息，但该页面应与其他页面分开，这意味着，例如，我有一个登录按钮，当我点击它以登录形式发送给我时，我需要它，这里是一个项目的链接，我已经附上了我的代码，说明我如何尝试使用它，但没有成功。请允许我感谢任何能帮助我度过难关的人。

我的App.js代码

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'; 
import Login from './Components/Login/Login'
import 'bootstrap/dist/css/bootstrap.min.css';
import Navbar from './Components/NavBar/Navbar';
import Slider from './Components/Slider/Slider';
import About from './Components/About/About';
import Service from './Components/Services/Service';
import Team from './Components/Team/Team';
import Promo from './Components/Promo/Promo';
import Testimonial from './Components/Testimonials/Testimonial';
import Contact from './Components/Contact/Contact';
import Footer from './Components/Footer/Footer';


function App() {
  return (
    <div className="App">

      <Navbar/>
      <Slider/>
      <About/>
      <Service/>
      <Team/>
      <Promo/>
      <Testimonial/>
      <Contact/>
      <Footer/>
     <Router>  
        <Switch>
          <Route path="/login" component={Login} /> 
        </Switch>
      </Router>

    </div>
  );
}

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route，Link}；
从“./Components/Login/Login”导入登录名
导入'bootstrap/dist/css/bootstrap.min.css'；
从“./Components/Navbar/Navbar”导入导航栏；
从“./Components/Slider/Slider”导入滑块；
从“./Components/About/About”导入关于；
从“./组件/服务/服务”导入服务；
从“./Components/Team/Team”导入团队；
从“./Components/Promo/Promo”导入促销；
从“./Components/Estimational/Estimational”导入证明文件；
从“./Components/Contact/Contact”导入联系人；
从“./Components/Footer/Footer”导入页脚；
函数App（）{
返回(
);
}

---

我的

你最好这样写

function MainWebsite() {
  return (
    <div className="App">

      <Navbar/>
      <Slider/>
      <About/>
      <Service/>
      <Team/>
      <Promo/>
      <Testimonial/>
      <Contact/>
      <Footer/>

    </div>
  );
}

function App() {
  return (
    <React.Fragment>
      <Router>  
        <Switch>
          <Route path="/login" component={Login} /> 
          <Route path="/" component={MainWebsite} /> 
        </Switch>
      </Router>
    </React.Fragment>
  );
}

export default App

function main网站（）{
返回(
);
}
函数App（）{
返回(
);
}
导出默认应用程序

因此，应用程序组件将根据开关或您自己的条件决定在什么时候加载什么。在我的示例中，我使用路径来决定加载什么。但是，您也可以使用条件或任何其他方法来编写它

---

让我知道这是否有效。很高兴为您提供帮助。

首先，您的登录链接不会转到

/Login

，而是转到

/#Login

，它会查找“Login”的html id在页面上。@ZekeHernandez我已更改为/login，但我的登录表单显示在页面底部，作为我的组件从应用程序中的顺序。js@mv509你的解决方案奏效了，它把我带到了我想要的登录页面，非常感谢