如果他無法登錄，如何導航到登錄頁面？

如果用戶沒有登錄，我已經為家創建了私人路線，當他嘗試訪問主頁時，它必須導航到登錄頁面，但我收到以下錯誤

我的代碼是 App.js

import "./App.css";
import {
  BrowserRouter as Router,
  Route,
  Routes,
  Navigate,
} from "react-router-dom";
import Home from "./pages/Home";
import Login from "./pages/Login";
import Register from "./pages/Register";
import BookingCar from "./pages/BookingCar";
import "antd/dist/antd.css";
import { protectedRoute } from "./components/ProtectedRoutes";

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route
            path="/"
            exact
            element={
              <protectedRoute>
                <Home />{" "}
              </protectedRoute>
            }
          ></Route>
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />
          <Route path="/bookingcar" element={<BookingCar />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

protectedRoute.js

import { Route, Navigate } from "react-router-dom";
export function protectedRoute(props) {
  if (localStorage.getItem("user")) {
    return <Route {...props} />;
  } else {
    return <Navigate to="/login" />;
  }
}

默認布局.js

import React from "react"; import { Menu, Dropdown, Button, Space, Row, Col } from "antd";

function DefaultLayout(props) {
  const user = JSON.parse(localStorage.getItem("user"));   
  const menu = (
    <Menu>
      <Menu.Item>
        <a href="https://www.antgroup.com">Bookings</a>
      </Menu.Item>
      <Menu.Item>
        <a href="https://www.aliyun.com">Profile</a>
      </Menu.Item>
      <Menu.Item
        onClick={() => {
          localStorage.removeItem("user");
          window.location.href = "/login";
        }}
      >
        <li>Logout</li>
      </Menu.Item>
    </Menu>   );   return (
    <div>
      <div className="header bs1">
        <Row gutter={16} justify="center">
          <Col lg={20} sm={24} xs={24}>
            <div className="d-flex justify-content-between">
              <h1>SomuCars</h1>
              <Dropdown overlay={menu} placement="bottomCenter">
                <Button>{user.username}</Button>
              </Dropdown>
            </div>
          </Col>
        </Row>
      </div>
      <div>{props.children}</div>
    </div>   ); }

export default DefaultLayout;

我該如何解決問題

uj5u.com熱心網友回復：

問題是當 localStorage 中沒有要決議的內容時JSON.parse(localStorage.getItem("user"));回傳null。user是null等稍后嘗試讀取時，user.username您會看到錯誤“無法讀取usernamenull”錯誤。

您可以提供備份值：

const user = JSON.parse(localStorage.getItem("user")) ?? {};

或使用可選鏈運算子或空檢查/保護子句：

<Button>{user?.username}</Button>
<Button>{user && user.username}</Button>

此外，受保護的路由組件命名不正確（React 組件是 PascalCased），并且Route在應該渲染childrenprop時錯誤地直接渲染組件。如果要重定向（即 REPLACE）而不是普通的 PUSH 導航replace，請在Navigate組件上指定prop 。

import { Navigate } from "react-router-dom";

export function ProtectedWrapper({ children }) {
  if (localStorage.getItem("user")) {
    return children;
  } else {
    return <Navigate to="/login" replace />;
  }
}

用法

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route
            path="/"
            element={(
              <ProtectedWrapper>
                <Home />
              </ProtectedWrapper>
            )}
          />
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />
          <Route path="/bookingcar" element={<BookingCar />} />
        </Routes>
      </Router>
    </div>
  );
}

標籤：反应 反应路由器 反应路由器-dom

上一篇：從react-router遷移到reactrouterv6

下一篇：為多個陣列中的每個ID渲染img元素