為什么我的反應網站沒有列印我的登錄頁面？

我正在使用 react 構建一個網站，并創建了一個導航欄，該導航欄被列印到我本地服務器上的 react 應用程式上。但我需要在導航欄和所有其他頁面顯示之前顯示登錄頁面。

這是我的 app.js

import './App.css';
import Navbar from './components/navbar';
import Login from './pages/login';
import Onboarding from './pages/onboarding';
import Training from './pages/training';
import Contract from './pages/contract';



import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <Router>
          <Login />
          <Route path= "/login" exact component={Login} />
          <div>
            <Routes>
              <Navbar/>
              <Route path = "/customer info" exact component={Navbar}/>
              <Route path = "/onboarding" exact component={Onboarding}/>
              <Route path = "/training material" exact component={Training}/>
              <Route path = "/contract" exact component={Contract}/>
            </Routes>
          </div>
      </Router>
      
    </div>
  );
}

export default App;

在我添加登錄路徑之前出現在導航欄之前它作業正常。很好，就像我輸入 npm start 時正在渲染一樣。

這是我的 login.js

// import React, {useState} from 'react';
import React from 'react';
import Logo from '../assets/BackBar_Logo_2-05.png';
import {Link } from 'react-router-dom';
import '../styles/login.css'


function login() {
  return (
    <div className = "background">
        <div>
          <img src ={Logo} alt = "backbar logo"/>
        </div>
        <div>

          <h1>Customer Portal</h1>
          <br></br>
          <h3>Login</h3>


          <form action = "submission.html" method = "POST">
            <section>
              <label for = "username">Username/email</label>
              <br></br>
              <input type = "text" name = "username" placeholder= "username" required/>
            </section>

            <section>
              <label for = "password">Password</label>
              <br></br>
              <input type="text" name="password" placeholder="password" reqiured/>
            </section>

            <Link to = "/customer info" > 
              <button>Login</button>
            </Link>

            <Link to = "/sign up">
              <button>Sign Up</button>
            </Link>

          </form>

        </div>
        
      </div>
  )
}

export default login

uj5u.com熱心網友回復：

您正在使用 react-router 6 對嗎？Route 只能用作 Routes 元素的子元素，從不直接渲染。請將您的路線包裝在路線中。

uj5u.com熱心網友回復：

您可能需要使用 Routes 作為上述回答者。另外，如果您希望默認情況下首先呈現登錄名，則需要將登錄名的路徑設定為“/”而不是“/login”，因此它是應用程式的根路徑，或者將呼叫重定向到“/”到轉到“/登錄”。就像反應路由器檔案中的這個例子一樣：

<Route exact path="/"><Redirect to="/dashboard" /></Route>

如果您想進一步阻止應用程式的其余部分被使用，直到登錄完成，您將需要創建某種登錄令牌并檢查其值以確定是否呈現其他路徑的內容. 如果這只是一個超級簡單的練習應用程式，您可以使用本地存盤/會話存盤來執行此操作，但如果您想要一些實際的安全性，則可以使用 JWT：https ://www.youtube.com/watch?v=27KeYk-5vJw

編輯：如果用戶未登錄，您還可以使用與上圖相同的重定向重定向到錯誤頁面：

<Route exact path="/">{loggedIn ? <Redirect to="/dashboard" />: <PublicHomePage /></Route>

uj5u.com熱心網友回復：

所有定義的路由都必須在一個Routes組件內。Navbar此外，將組件放在組件內部也不好Routes，因為每次切換到另一個路由時它都會不必要地重新渲染。

像下面這樣：

function App() {
  return (
    <div className="App">
      <Router>
            <Navbar/>
            <Routes>
              <Route path= "/login" exact component={Login} />
              <Route path = "/customer info" exact component={Navbar}/>
              <Route path = "/onboarding" exact component={Onboarding}/>
              <Route path = "/training material" exact component={Training}/>
              <Route path = "/contract" exact component={Contract}/>
            </Routes>
      </Router>
      
    </div>
  );
}

如果用戶未登錄，要將用戶重定向到登錄頁面，您必須引入私有/受保護的路由。你可以在這里找到一篇很棒的文章。

標籤：javascript 反应

上一篇：迭代嵌套物件以構建檔案樹

下一篇：向上移動網格，但光線投射器檢測到它就像它在Y軸上的鏡像一樣