Этот проект отлично работает в разработке, используя "npm start", но после запуска "npm run build" и доступа к индексу. html из папки сборки, похоже, он не загружает ни один из моих компонентов Route , Единственное, что загружает, - это мой компонент Header, указанный в приложении. js, поскольку он является единственным, не входящим в маршрут. Я также получаю сообщение об ошибке в консоли при нажатии кнопки из заголовка, которая соответствует маршруту, в котором указано «Uncaught DOMException: не удалось выполнить« pushState »для« History »: объект состояния истории с 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": "."
}
index. 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>
