与React路由器混淆

Question

我正在尝试在子组件中使用路由器对象但无法这样做。我的主要目标是在成功登录后更改路线。在react router v4中，我不能直接使用历史对象。

我的主要目标是使用this.context.router，以便我进行路线转换。

这是我的应用程序代码（我删除了大部分内容，只是添加了我认为需要的内容）如果您需要更多信息，请发表评论。

路由器

我怀疑如何添加组件到路由。但这是我发现使用布局的唯一方法。所以，如果您对此有任何建议，我将不胜感激。

<Router>
    <Switch>

        <Route path="/login" render={ () => ( <LayoutEmpty {...data} children={ <Login user={this.props.user} /> }  /> ) } />

        <Route exact path="/" render={ () => ( <LayoutApp {...data} children={ <Dashboard user={this.props.user} /> }  /> ) } />

        <Route path="*" component={LayoutNotFound} />

    </Switch>
</Router>

现在让我们来谈谈登录组件。在组件内部没有传递上下文对象。

我添加了像这样的

的contextTypes

Login.contextTypes = {
  router: PropTypes.object
};

但是这只给我空对象作为常量。不传递路由对象。

（如果您需要登录组件的代码，请告诉我，但我认为我的问题是如何使用<Route>）

Answer 1

我最终重构了我的代码并将历史记录对象传递给Smart组件（容器）级别。

My Refactored路由器看起来像这样

<Router>
    <Switch>

        <Route path="/login" component={Login} />

        <Route exact path="/" component={Dashboard} />

        <Route path="*" component={LayoutNotFound} />

    </Switch>
</Router>

之后我将Layout组件导入容器（Login，Dashboard），并将历史对象作为道具传递给这些容器，如果他们需要它的话。

容器（智能组件）

import React from 'react';
import LayoutApp from '../containers/LayoutApp'

    class Dashboard extends React.Component{
    ...
    render(){   
            return (    
            <LayoutApp history={this.props.history} title="Dashboard">  
             ...