2

我的一条路线需要两个孩子来完成我想做的事情。

我定义所有路由的主应用程序页面可能如下所示：

    <Route path="/logs" component={Logs}>
        <Route path="/logs/archive(/**)" component={ArchiveAction}></Route>
        <Route path="/logs/view(/**)" component={LogApp}></Route>
    </Route>

至于 Logs 组件，如果我在 /logs/view/whatever 路由，它将呈现名为 LogApp 的组件，它将是整个页面。

如果它在 /logs/archive/whatever Logs 的一个子组件上，那么会发生什么变化。但这部分工作正常。我不能去工作的是/logs/view/whatever。这是我当前的日志组件：

export class Logs extends Component{

    render(){
        var initialLogsPage =(<Grid>
                <Row>

                    <Col lg={4} md={4} sm={4}>
                        <Directories/>
                    </Col>
                    <Col lg={4} md={4} sm={4}>
                        <Archives children={this.props.children}/>
                    </Col>

                </Row>
            </Grid>);
        return(
            <div>
            {initialLogsPage || this.props.children}
            </div>
        );
    }
}

我知道我对 this.props.children 的使用可能是问题所在，因为我正在处理两个问题。有没有办法解决这个问题？

4

2 回答 2

0

您可以使用Route不带路径的 s：

// Route config
<Route path="/logs" component={Logs}>
  <Route component={Archives}>
    <Route path="/logs/archive(/**)" component={ArchiveAction}></Route>
  </Route>
  <Route path="/logs/view(/**)" component={LogApp}></Route>
</Route>

// components
const Archives = ({ children }) => (
  <Grid>
    <Row>
      <Col lg={4} md={4} sm={4}>
        <Directories/>
      </Col>
      <Col lg={4} md={4} sm={4}>
        <Archives>{children}</Archives>
      </Col>
    </Row>
  </Grid>
);

const Logs = ({ children }) => <div>{children}</div>; // add shared layout here

您还应该考虑应该在/logs. 要么更改Logs为 check props.children，例如 ，要么在您的路线配置中<div>{children || <LogIndexComponent />}</div>包含 a 。IndexRoute

于 2016-11-12T10:06:33.957 回答
0

只需更改您的路线：

<Route path="/logs" component={Logs}>
    <Route path="/logs/archive(/**)" component={ArchiveAction}></Route>
</Route>
<Route path="/logs/view(/**)" component={LogApp}></Route>
于 2016-11-11T20:22:19.047 回答