|
React JS v4 Routing, не подгружается js после ручного обновления страницы
#39615884
Ссылка:
Ссылка на сообщение:
Ссылка с названием темы:
Ссылка на профиль пользователя:
|
Участник
Откуда: Perm
Сообщения: 2 028
|
|
Добрый день! Новичок я во фронтовом деле, никак не могу нагуглить решение.
Что имеем:
package.json 1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
{
"name": "admin",
"version": "0.1.0",
"private": true,
"homepage" : ".",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.1",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-native": "^4.2.0",
"react-bootstrap": "^0.32.1",
"patternfly-bootstrap-treeview": "^2.1.5",
"material-components-web": "^0.32.0",
"babel-preset-es2015": "^6.24.1"
},
"scripts": {
"start": "react-scripts start",
"startWebpackDev" : "webpack",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
webpack.config.js 1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
'use strict';
const NODE_ENV = process.env.NODE_ENV || 'development';
var path = require('path');
var webpack = require('webpack');
module.exports = {
context: __dirname + '/src',
entry: {
index: ['./index', './lib/jquery/jquery-3.3.1', './lib/jstree/jstree']
},
output: {
path: __dirname + "/public/js",
filename: '[name].js',
// library: '[name]',
publicPath: (process.env.NODE_ENV === 'development' ? '/' : './')
// publicPath: '/'
},
resolve: {
extensions: ['*', '.js', '.jsx', '.json']
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: ['react', 'es2015'],
plugins: ['transform-class-properties']
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
loader: 'url-loader',
options: {
limit: 10000
}
}
]
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
NODE_ENV: JSON.stringify(NODE_ENV),
LANG: JSON.stringify('ru')
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
devServer: {
historyApiFallback: true,
contentBase: './',
hot: true
}
}[/SRC] MainMenu.js здесь роутинг 1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
import React from 'react';
import {Route, Switch} from 'react-router-dom'
import Home from './pages/Home'
import Reestr from './pages/Reestr'
function MainMenu() {
return (
<Switch>
<Route exact={true} path="/" component={Home}/>
<Route path="/reestr" component={Reestr}></Route>
<Route component={NoMatch}/>
</Switch>
);
const NoMatch = ({location}) => (
<div>
<h3>
No match for <code>{location.pathname}</code>
</h3>
</div>
);
}
export default MainMenu;
Header.js здесь линки 1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
import React from 'react';
import { Link} from 'react-router-dom'
import './css/header.css'
function Header() {
return (
<header>
<nav className="menu-background">
<Link to='./' className="menu-button">Главная</Link>
<Link to='./reestr' className="menu-button">Реестр показателей</Link>
</nav>
</header>
);
}
export default Header;
index.html 1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>Админка</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script type="text/javascript" src="./js/index.js"/>
</body>
</html>
index.js 1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Header from './components/Header';
import MainMenu from './components/MainMenu';
import registerServiceWorker from './registerServiceWorker';
import {HashRouter as Router, Link, Route, Switch} from 'react-router-dom';
ReactDOM.render((
<Router>
<div>
<Header/>
<MainMenu/>
</div>
</Router>
), document.getElementById('root'))
registerServiceWorker();
Что происходит:
открывается страница и легко можно переключаться между линками через #
например:
http://localhost:3000/#/reestr
откроет компонент Reestr.
В нем используется сторонний js - jstree.js вот этот вот но не суть. Главная проблема, что при ручном обновлении страницы F5/CTRL+R или при закрытии и открытии обратно вкладки. В консоли возникает ошибка, которая, как я предполагаю, происходит из-за того, что index.js прогрузился позднее чем был вызван метод и получается, что его как бы и нет. Прикрепляю скрин. и вот код компонента.
Reestr.js 1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
import React from 'react';
class Reestr extends React.Component {
constructor(props, context) {
super(props, context);
this.createJSTree = this.createJSTree.bind(this);
console.log('called the constructor Reestr');
}
componentWillMount(nextProps, nextState) {
console.log('component Will Mount');
}
componentDidMount() {
console.log('component Did Mount');
window.addEventListener('DOMContentLoaded', this.createJSTree());
// window.addEventListener('load', this.createJSTree());
}
componentDidUpdate() {
console.log('component Did Update');
}
createJSTree() {
console.log('called createJSTree');
console.log($('#reestrTreeDiv'));
$('#reestrTreeDiv').jstree({
"core": {
"multiple": false,
},
"plugins": ["wholerow"]
});
}
render() {
console.log('called render');
return <div id="reestrTreeDiv" className="reestrTreeDiv sx-alignment-left">
<ul id="rootNodeUL">
<li id="rootNode" className="jstree-open"> Реестр
<ul id="reestTree">
</ul>
</li>
</ul>
</div>
}
}
export default Reestr;
Как вот победить этого зверя? :) |
|
|
