Question

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

我定义所有路线的主应用页面可能看起来像这样：

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

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

如果它在/ logs / archive /上，那么Logs的任何子组件都会发生变化。但这部分工作正常。我无法工作的是/ logs / view / what。这是我当前的Logs组件：

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的使用可能就是问题所在，因为我正在处理两个问题。有没有办法解决这个问题？

Answer 1

只需更改路线：

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

Answer 2

您可以在没有路径的情况下使用Route：

// 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以检查props.children，例如<div>{children || <LogIndexComponent />}</div>，或在路由配置中包含IndexRoute。

具有多个子节点的React-router路由

2 个答案: