React Router 为所有组件渲染空白页面

Question

我目前正在学习关于 react-router-dom 的教程，每当我将我的三个路由放入 Router 时，在拉起 localhost 时我总是在所有三个路由上出现空白页面。我正在使用 path 和 element 在 element 属性内使用三元运算符配置路由，但在渲染时我仍然得到一个空白页面。知道为什么会这样吗？谢谢！

App.js

import React, { Fragment, useState, useEffect } from "react";

import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect
} from "react-router-dom";


//components

import Login from "./components/Login";
import Register from "./components/Register";
import Dashboard from "./components/Dashboard";


function App() {
  const checkAuthenticated = async () => {
    try {
      const res = await fetch("http://localhost:5000/auth/verify", {
        method: "GET",
        headers: { token: localStorage.token }
      });

      const parseRes = await res.json();

      parseRes === true ? setIsAuthenticated(true) : setIsAuthenticated(false);
    } catch (err) {
      console.error(err.message);
    }
  };

  useEffect(() => {
    checkAuthenticated();
  }, []);

  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const setAuth = boolean => {
    setIsAuthenticated(boolean);
  };

  return (
    <Fragment>
      <Router>
        <div className="container">
          <Switch>
            <Route
              path="/login"
              element={
                !isAuthenticated ? (
                  <Login setAuth={setAuth} />
                ) : (
                  <Redirect to="/dashboard" />
                )
              }
            />
            <Route
              path="/register"
              element={
                !isAuthenticated ? (
                  <Register setAuth={setAuth} />
                ) : (
                  <Redirect to="/dashboard" />
                )
              }
            />
            <Route
              path="/dashboard"
              element={
                isAuthenticated ? (
                  <Dashboard setAuth={setAuth} />
                ) : (
                  <Redirect to="/login" />
                )
              }
            />
          </Switch>
        </div>
      </Router>
    </Fragment>
  );
}

export default App;

Answer 1

react-router-dom@5 中的 Route 组件没有 element 属性，element 是 v6 属性。

改为使用 `render 函数属性。

示例：

<Switch>
  <Route
    path="/login"
    render={props => !isAuthenticated
      ? (
        <Login setAuth={setAuth} {...props} />
      ) : (
        <Redirect to="/dashboard" />
      )     
    }
  />
  <Route
    path="/register"
    render={props => !isAuthenticated
      ? (
        <Register setAuth={setAuth} {...props} />
      ) : (
        <Redirect to="/dashboard" />
      )
    }
  />
  <Route
    path="/dashboard"
    render={props => isAuthenticated
      ? (
        <Dashboard setAuth={setAuth} {...props} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
</Switch>

更新

未经身份验证的状态可能与您在确认身份验证状态之前的初始状态相匹配。使用既未经过身份验证也未经过身份验证的初始 isAuthenticated 状态值，即既不是真也不是假。在解析身份验证状态时，使用此“第三”状态值有条件地呈现 null 或其他一些加载指示器。

示例：

const [isAuthenticated, setIsAuthenticated] = useState();

if (isAuthenticated === undefined) {
  return null; // or loading spinner, etc...
}

return (
  ... routes & UI ...
);

React Router 为所有组件渲染空白页面

React Router rendering blank pages for all components

javascript

reactjs

react-router

更新