.htaccess React路由器,刷新页面结果为404页面live服务器

6tr1vspr  于 2023-04-12  发布在  React
关注(0)|答案(1)|浏览(143)

我已经用npm run build构建了我的react应用。现在在live服务器中导航链接工作正常,但是没有主页、https://www.nayeemriddhi.info/authapp/和其他页面,刷新页面时它给了我一个404页面,就像https://www.nayeemriddhi.info/authapp/register页面一样。我的react应用的代码如下所示

index.js代码

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter, HashRouter } from "react-router-dom";
import { Provider } from "react-redux";
import store from "./store/Store";
import { PersistGate } from "redux-persist/integration/react";
import { persistStore } from "redux-persist";

let persistor = persistStore(store);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <BrowserRouter basename="/authapp">
          <App />
        </BrowserRouter>
      </PersistGate>
    </Provider>
  </React.StrictMode>
);

App.js代码

import { Navigate, Route, Routes } from "react-router-dom";
import "./admin/css/Back-Css-Inc";
import Login from "./admin/pages/Login";
import Register from "./admin/pages/Register";
import Contents from "./admin/components/Contents";
import EmailVerify from "./admin/EmailVerify/EmailVerify";
import ProtectedRoute from "./admin/components/ProtectedRoute";
import NotFoundPage from "./admin/components/404-Page";
import ForgotPassword from "./admin/pages/ForgotPassword";
import ResetPassword from "./admin/pages/ResetPassword";

function App() {
  return (
    <>
      <Routes>
        {["/", "/login"].map((path) => (
          <Route path={path} element={<Login />} />
        ))}
        <Route path="/forget-password" element={<ForgotPassword />} />
        <Route path="/register" element={<Register />} />
        <Route path="/users/:id/verify/:token" element={<EmailVerify />} />
        <Route path="/users/:id/reset/:token" element={<ResetPassword />} />
        <Route element={<ProtectedRoute />}>
          <Route path="/admin-dashboard" element={<Contents />} />
        </Route>
      </Routes>
    </>
  );
}

export default App;

Package.json代码

{
  "name": "auth",
  "homepage": "https://www.nayeemriddhi.info/authapp/",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.9.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "dotenv": "^16.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.6.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.10.0",
    "react-scripts": "5.0.1",
    "react-toastify": "^9.1.1",
    "reactstrap": "^9.1.5",
    "redux-persist": "^6.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

有什么办法吗?谢谢
我期待路由其他页面应该呈现,同时刷新页面太多。

eqzww0vc

eqzww0vc1#

我为它做了一个解决方案,用.htaccess文件,把它放到live server同一个文件夹中,代码是

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /authapp/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /authapp/index.html [L]
</IfModule>

谢谢大家

相关问题