Маршруты React-маршрутизатора с несколькими дочерними элементами

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 / что угодно. Вот мой текущий компонент журналов:

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без путей:

// 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 в вашем конфиге маршрута.

Answer 2

Просто измените ваши маршруты:

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