Ich benutze mobx-react-router aber ich habe ein Problem, wenn ich "push" die URL ändert, aber meine gesamte Seite wird leer. Also denke ich, dass meine Komponenten nicht neu gerendert werden oder auf eine komplett neue Seite gehen.Mit "push" ändert sich die URL, aber meine gesamte Seite wird leer
Versionen
"mobx": "^3.1.16",
"mobx-react": "^4.2.2",
"mobx-react-devtools": "^4.2.15",
"mobx-react-router": "^4.0.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router": "^4.1.1",
"babel": "^6.23.0",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"history": "^4.6.3",
"html-webpack-plugin": "^2.29.0",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0"
webpack
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require("path");
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, "dist"),
publicPath: "/",
filename: 'app.bundle.js'
},
module: {
rules: [
{
test: /\.s?css$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}, {
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
}, {
test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
}, {
test: /\.(gif|png|jpe?g|svg)$/i,
loader: 'file-loader'
}
]
},
devServer: {
historyApiFallback: true
},
plugins: [new HtmlWebpackPlugin({template: './src/index.html'})]
}
App.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'mobx-react';
import { useStrict } from 'mobx';
import createBrowserHistory from 'history/createBrowserHistory';
import {syncHistoryWithStore } from 'mobx-react-router';
import { Router } from 'react-router'
import AppContainer from './components/AppContainer';
const browserHistory = createBrowserHistory();
import stores from '../src/stores/Stores';
const history = syncHistoryWithStore(browserHistory, stores.routingStore);
useStrict(true);
ReactDOM.render(
<Provider {... stores}>
<Router history={history}>
<AppContainer />
</Router>
</Provider>,
document.getElementById('root')
);
Stores.js
import {RouterStore} from 'mobx-react-router';
const routingStore = new RouterStore();
const stores = {
routingStore,
}
export default stores;
AppContainer
import React, {Component} from 'react'
import ReactDOM from 'react-dom';
import {withRouter, Route} from 'react-router'
import MainComponent from '../components/MainComponent'
@withRouter
export default class AppContainer extends Component {
constructor() {
super();
}
render() {
return (
<div>
<Route exact path='/' component={MainComponent}/>
</div>
)
}
}
MainComponent
import React, {Component} from 'react'
import ReactDOM from 'react-dom';
import {observer, inject} from 'mobx-react';
import {withRouter, Route} from 'react-router'
import SecondComponent from './SecondComponent';
import ThirdComponent from './ThirdComponent';
@withRouter
@inject('routingStore')
@observer
export default class MainComponent extends Component {
constructor() {
super();
}
render() {
return (
<div>
<h1>Main </h1>
<SecondComponent />
<Route path='/test/third/:id/data' component={ThirdComponent}/>
</div>
)
}
}
SecondComponent
import React, {Component} from 'react'
import ReactDOM from 'react-dom';
import {observer, inject} from 'mobx-react';
import {withRouter, Route} from 'react-router'
@inject('routingStore')
@observer
export default class SecondComponent extends Component {
constructor() {
super();
}
render() {
const props = this.props;
const {push} = this.props.routingStore;
return (
<div>
<h1>Second2 </h1>
<a onClick={() => {push(`/test/third/1/data`); }}>Render Third Component</a>
</div>
)
}
}
ThirdComponent
import React, {Component} from 'react'
import ReactDOM from 'react-dom';
import {observer, inject} from 'mobx-react';
import {withRouter, Route} from 'react-router'
@inject('routingStore')
@observer
export default class ThirdComponent extends Component {
constructor() {
super();
}
render() {
return (
<div>
<h1>Third </h1>
</div>
)
}
}
Sie schreiben, dass Sie 'withRouter' importieren, aber verwenden Sie es tatsächlich? Ihr Beispiel ist nicht klar. Ich sage nicht, dass das das Problem ist, aber es ist schwer zu sagen. – Andy
Ich habe jetzt die Anweisung für den Router hinzugefügt. Ich könnte später versuchen, eine einfache reactjs App zu erstellen, die ich mit meinem Problem posten kann, da es schwer ist, mit all meinem Code zu zeigen, der in alles gemischt ist. – chobo2