2017-12-03 10 views
0

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> 
     ) 
    } 
} 
+0

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

+0

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

Antwort

1

Dies liegt daran, in Ihrem AppContainer, haben Sie hinzugefügt th e exact Eigentum an der / Route (<Route exact path='/' component={MainComponent}/>).

Deshalb, wenn Sie die URL /Test ändern/dritte /: id/data, der Pfad nicht genau übereinstimmt mehr /, so dass die MainComponent Aushänge.

Entfernen Sie die exact Prop und das sollte gut funktionieren.

+0

Hmm, das scheint auf dem Beispiel zu funktionieren, das ich gepostet habe, aber in meiner Haupt-App, die ich im Grunde auf dem Beispiel-Code basiert, den ich gepostet habe, bekomme ich immer noch das gleiche Problem, selbst nachdem ich "exact" entfernt habe. – chobo2

+0

Ich fand es heraus, ich hatte einige andere Fehler in der Komponente, die von der Route aufgerufen wurde. – chobo2

Verwandte Themen