javascript - 使用“推送”，URL更改，但我的整个页面空白

我正在使用mobx-react-router，但是当我使用“ push”更改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"

网络包

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

主要成分

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

最佳答案

这是因为在AppContainer中，已将exact属性添加到/路由（<Route exact path='/' component={MainComponent}/>）。

因此，当您将URL更改为/ test / third /：id / data时，路径不再与/完全匹配，因此MainComponent会卸载。

删除exact道具，这应该可以正常工作。