React 路由器在本地主机上工作正常，但如果没有链接我无法转到特定位置

Question

当我在本地主机上访问 /dashboard 时，它工作正常，但是当我部署并转到 /localhost 时，它给了我 404 错误。

我不认为问题出在代码中，因为我第一次部署它时工作正常，但知道无法直接使用 url 中的路径进行导航

index.js：

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <React.StrictMode>
      <BrowserRouter basename={process.env.PUBLIC_URL}>
      {/* <HashRouter basename={process.env.PUBLIC_URL}> */}
      {/* <BrowserRouter> */}
        <Routes>
          <Route path="/" element={<App />}>
            <Route index element={<Home />} />
            <Route path="sobre" element={<About />} />
            <Route path="faq" element={<Faq />} />
            <Route path="privacidade" element={<Privacy />} />
            <Route path="termos" element={<Terms />} />
            <Route path="quem-esta-no-app" element={<WhoIsInTheApp />} />
            <Route path="privacidade/lgpd" element={<LGPDPage />} />
            <Route path='dashboard' element={<DashboardHome />} />
            <Route path="dashboard/login" element={<Login />} />
            <Route path="dashboard/produtos/" element={<Products />} />pathName="/productCategoryUpdate" fields={[{
                name: 'imageURL',
                type: 'file',
                accept: 'image/jpeg, image/png',
                label: 'Imagem',
              },
              {
                name: 'Name',
                type: 'text',
                placeholder: 'Nome da categoria',
              },]} title="Categoria" />}/>
            <Route path="dashboard/produtos/medida" element={<MeasureList />} />
            <Route path="dashboard/produtos/medida/criar" element={<MeasureCreate />} />
            <Route path="dashboard/produtos/armazenamento" element={<StorageList />} />
            <Route path="dashboard/produtos/armazenamento/update/:id" element={<Update pathName="/storages_update" fields={[{
                name: 'imageURL',
                type: 'file',
                accept: 'image/jpeg, image/png',
                label: 'Imagem',
              },
              {
                name: 'productStorageID',
                type: 'hidden',
              },
              {
                name: 'Name',
                type: 'text',
                placeholder: 'Nome da categoria',
              },]} title="Armazenamento" />}/>
            <Route path="dashboard/produtos/armazenamento/criar" element={<StorageCreate />} />
            <Route path="dashboard/produtos/avaliações" element={<ProductRating />} />
            <Route component={PageNotFound} />
          </Route>
        </Routes>
      </BrowserRouter>
      {/* </HashRouter> */}
    </React.StrictMode>
  </Provider>  
);

reportWebVitals();

App.js：

function App() {
  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
  const [isAuthenticated, setIsAuthenticated] = useState(false);

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

  const checkUserAuthentication = async () => {
    try {
      await magic.user.isLoggedIn();
      if (await magic.user.isLoggedIn()) setIsAuthenticated(true);
    } catch (err) {
      setIsAuthenticated(false);
    }
  };


  const [theme, setTheme] = useState(getDefaultTheme());

  const location = useLocation();
  const currentPath = location.pathname.startsWith("/dashboard");

  // Check if the user is on the "/dashboard" path
  const isDashboardPath = currentPath;

  if (isDashboardPath) {
    return (
      <ThemeContext.Provider value={{ theme, setTheme }}>
        <div className={`theme-${theme}`}>
          <div className="layout-wrapper">
            {
              isAuthenticated ? (
                <>
                  <RespectiveNavbar
                    isMobile={isMobile}
                    theme={theme}
                    handleThemeChange={handleThemeChange}
                    setIsAuthenticated={setIsAuthenticated}
                  />
                  <AsideMenu />
                  {/* <button onClick={handleLogout}>Logout</button> */}
                <Outlet />
                </>
              ) : (
                <Login setIsAuthenticated={setIsAuthenticated}/>
              )
            }     
          </div>
        </div>
      </ThemeContext.Provider>
    );
  } else {
    return (
      <ThemeContext.Provider value={{ theme, setTheme }}>
        <div className={`theme-${theme}`}>
          <div className="layout-wrapper">
            <Navbar
            handleThemeChange={handleThemeChange}
            theme={theme} 
            />
            <Outlet />
            <Footer />
          </div>
        </div>
      </ThemeContext.Provider>
    );
  }
}

const RespectiveNavbar = ({isMobile, theme, handleThemeChange, setIsAuthenticated}) => {
  return (
    isMobile ? (
      <Navbar
      handleThemeChange={handleThemeChange}
      theme={theme}
      />
      ) : (
        <NavbarDesktop
        handleThemeChange={handleThemeChange}
        theme={theme}
        setIsAuthenticated={setIsAuthenticated}
        />
      )
  );
}

export default App;

控制台报错：

Failed to load resource: the server responded with a status of 404 ()

Answer 1

您需要按照React客户端路由部署指南

中的步骤进行操作

具体来说，您需要在

.htaccess

文件中实现一个前端控制器，使

index.html

处理所有 URL。如果没有这个，您的路由器将不会在除主页之外的任何内容上被触发。

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]