在 React 中使用“npm run build”后路由未加载
Neg*_*gan 4 build reactjs react-router
该项目在使用“npm start”的开发中完美运行，但在运行“npm run build”并从构建文件夹访问index.html后，它似乎没有加载我的任何路由组件。唯一加载的是 App.js 中指定的 Header 组件，因为它是唯一不在 Route 内的组件。当单击标题中与路由相对应的按钮时，我还会在控制台中收到错误，该按钮显示“未捕获的 DOMException：无法在“历史记录”上执行“pushState”：具有 URL“file:///C: 的历史状态对象” /register' 无法在原点为 'null' 且 URL 为“file:///C:/”的文档中创建。我的路径可能有问题，有什么建议吗？
应用程序.js
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle';
import './App.scss';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import jwt_decode from 'jwt-decode';
import store from './store';
import Dashboard from './components/Dashboard';
import Header from './components/Layout/Header';
import Landing from './components/Layout/Landing';
import ProjectBoard from './components/ProjectBoard/ProjectBoard';
import Register from './components/UserManagement/Register';
import Login from './components/UserManagement/Login';
import setJWTToken from './securityUtils/setJWTToken';
import { SET_CURRENT_USER } from './actions/types';
import { logout } from './actions/securityActions';
const jwtToken = localStorage.jwtToken;
if (jwtToken) {
setJWTToken(jwtToken);
const decoded_jwtToken = jwt_decode(jwtToken);
store.dispatch({
type: SET_CURRENT_USER,
payload: decoded_jwtToken
});
const currentTime = Date.now() / 1000;
if (decoded_jwtToken.exp < currentTime) {
store.dispatch(logout());
window.location.href = '/';
}
}
function App() {
return (
<Provider store={store}>
<BrowserRouter>
<Header />
{
// Public Routes
}
<Route exact path='/' component={Landing} />
<Route exact path='/register' component={Register} />
<Route exact path='/login' component={Login} />
{
// Private Routes
}
<Switch>
<Route exact path='/dashboard' component={Dashboard} />
<Route
exact
path='/projectBoard/:id'
render={props => <ProjectBoard {...props} isDemo={false} />}
/>
</Switch>
</BrowserRouter>
</Provider>
);
}
export default App;
包.json
{
"name": "react-client",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.19.0",
"bootstrap": "^4.4.1",
"classnames": "^2.2.6",
"jquery": "^3.4.1",
"jwt-decode": "^2.2.0",
"node-sass": "^4.13.0",
"popper.js": "^1.16.0",
"react": "^16.10.1",
"react-beautiful-dnd": "^12.2.0",
"react-dom": "^16.10.1",
"react-redux": "^7.1.1",
"react-router-dom": "^5.1.1",
"react-scripts": "3.1.2",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0",
"styled-components": "^4.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:8080",
"homepage": "."
}
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="React Client"
content="React Client"
/>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<script
src="https://kit.fontawesome.com/d4e16c04e7.js"
crossorigin="anonymous"
></script>
<title>React Client</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
9887 次 |
| 最近记录： |