有多个子代的React-router路由

Question

One of my routes needs two children to make what I want to do work.

The main app page where I define all the routes would probably look something like this:

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

As for the Logs component, if I am at the /logs/view/whatever route, it will render the component called LogApp which will be the whole page.

If it's on /logs/archive/whatever a subcomponent of Logs is what changes. But this part works fine. What I cannot get to work is /logs/view/whatever. Here is my current Logs component:

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

I understand that my use of this.props.children is probably where the problem lies since I am dealing with two. Is there any way to get around this?

Answer 1

Just change your routes:

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

Answer 2

You can use Route s without paths:

// 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

You should also think about what should be rendered at /logs . Either change Logs to check props.children , eg, <div>{children || <LogIndexComponent />}</div> <div>{children || <LogIndexComponent />}</div> , or include a IndexRoute in your route config.