使用“推”，网址改变，但我的整个页面变为空白

Question

我使用mobx-react-router但我有一个问题，当我使用“推”的URL更改，但我的整个页面变为空白。所以我想也许我的组件没有被渲染，或者它将进入一个全新的页面。

"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> 
     ) 
    } 
} 

Answer 1

这是因为在你AppContainer，你已经加入日e exact财产到/路线（<Route exact path='/' component={MainComponent}/>）。

因此，当您更改URL以/测试/三/：ID /数据，路径不再完全匹配/，所以MainComponent卸除。

删除exact道具，这应该很好。