我已经用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"
]
}
}
有什么办法吗?谢谢
我期待路由其他页面应该呈现,同时刷新页面太多。
1条答案
按热度按时间eqzww0vc1#
我为它做了一个解决方案,用
.htaccess
文件,把它放到live server同一个文件夹中,代码是谢谢大家