嵌套路由在部署到 Netlify 的 React 应用程序中不起作用

Question

在部署于

main--fascinating-melba-bd8f4d.netlify.app

的 React 应用程序中，我正在使用

react-router-dom

，但我无法让嵌套路由正常工作。子路由应该只有在用户成功登录后才可以访问。这是代码：

<Route path='/private' element={<Auth />}>
  <Route path='/private/my-profile' element={<MyProfile />} />
  <Route path='/private/sell-something' element={<Sell />} />
</Route>

嵌套路由在我的本地服务器上运行良好。用户登录后，可以在

localhost:3000/private/my-profile

查看自己的个人资料，在

localhost:3000/private/sell-something

查看销售商品的页面。但是，即使在成功登录后，这两个子路由都无法在我的 Netlify 站点上访问。当登录用户访问

this

或

that URL

时，传递给 Route 元素的 React 功能组件 <MyProfile /> 和 <Sell /> 甚至不会呈现。当您未登录时，访问这些 URL 不会导致您像预期那样被重定向到登录页面。

我有一个

public/_redirects

文件，其内容为

/* /index.html 200

，所以问题不是我忽略创建该文件。除了嵌套的路线之外，我的所有路线都工作正常。

如果有帮助，这里是

Auth.js

的内容，从中导入 Auth 元素：

import { Navigate, Outlet } from 'react-router-dom';
import { useUser } from '../lib/useUser';

export const Auth = () => {
  const user = useUser();

  if (!user) return <Navigate to='/login' />;

  return <Outlet />;
};

lib

文件夹中包含以下两个文件，分别是

useUser.js

和

useToken.js

：

import { useState, useEffect } from 'react';

import { useToken } from './useToken';

export const useUser = () => {
  const [token] = useToken();

  const getPayloadFromToken = (token) => {
    const encodedPayload = token.split('.')[1];
    return JSON.parse(atob(encodedPayload));
  };

  const [user, setUser] = useState(() => {
    if (!token) return null;
    return getPayloadFromToken(token);
  });

  useEffect(() => {
    if (!token) setUser(null);
    else setUser(getPayloadFromToken(token));
  }, [token]);

  return user;
};

import { useState } from 'react';

export const useToken = () => {
  const [token, setTokenInternal] = useState(() => {
    return localStorage.getItem('token');
  });

  const setToken = (newToken) => {
    localStorage.setItem('token', newToken);
    setTokenInternal(newToken);
  };

  return [token, setToken];
};

Answer 1

如果您使用客户端路由，则无法在

"homepage": "."

中使用

package.json

。

这应该只用于服务于来自不同路径的相同构建，特别是......

如果您不使用HTML5 PushState历史API或不根本使用客户端路由

只需从

"homepage"

中删除

package.json

行，重新部署您的应用程序并询问为什么首先添加它。

这将使用默认的静态资源路径

"/"

。