Javascript 使用；推；，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')
);

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}来自“React”
从“react dom”导入react dom；
从“反应路由器”导入{withRouter，Route}
从“../components/MainComponent”导入MainComponent
@带路由器
导出默认类AppContainer扩展组件{
构造函数（）{
超级（）；
}
render（）{
返回(
)
}
}

主要成分

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

import React，{Component}来自“React”
从“react dom”导入react dom；
从“mobx react”导入{observer，inject}；
从“反应路由器”导入{withRouter，Route}
从“/SecondComponent”导入SecondComponent；
从“/ThirdComponent”导入ThirdComponent；
@带路由器
@注入（'routingStore'）
@观察者
导出默认类MainComponent扩展组件{
构造函数（）{
超级（）；
}
render（）{
返回(
主要的
)
}
}

第二成分

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

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

import React，{Component}来自“React”
从“react dom”导入react dom；
从“mobx react”导入{observer，inject}；
从“反应路由器”导入{withRouter，Route}
@注入（'routingStore'）
@观察者
导出默认类SecondComponent扩展组件{
构造函数（）{
超级（）；
}
render（）{
const props=this.props；
const{push}=this.props.routingStore；
返回(
第二
{push（`/test/third/1/data`）；}}>呈现第三个组件
)
}
}

第三成分

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

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

import React，{Component}来自“React”
从“react dom”导入react dom；
从“mobx react”导入{observer，inject}；
从“反应路由器”导入{withRouter，Route}
@注入（'routingStore'）
@观察者
导出默认类ThirdComponent扩展组件{
构造函数（）{
超级（）；
}
render（）{
返回(
第三
)
}
}

这是因为在您的

AppContainer

中，您已将

exact

属性添加到

/

路由（

）

因此，当您将url更改为/test/third/:id/data时，路径不再完全匹配

/

，因此

main组件将卸载

移除
exact
道具，这应该可以正常工作。
您写道您正在使用路由器导入
，但您实际使用了它吗？你的例子不清楚。我不是说这是问题所在，但很难说。我现在已经包括了withrouter语句。我可能稍后会尝试制作一个简单的reactjs应用程序，我可以发布我的问题，因为很难将我所有的代码混合在一起显示。嗯，这似乎对我发布的示例有效，但在我的主应用程序中，我基本上基于我发布的示例代码，即使删除了“精确”，我仍然会遇到同样的问题。我发现，我在路由调用的组件中有一些其他错误。