Вложенные компоненты с React Router

Question

Я следую онлайн-учебнику React. В учебном пособии React Router 3 использовался, когда я получил React Router 4, когда я загружал React Router (и react-router-dom). Код в учебнике выглядит следующим образом.

import React from "react";
import {render} from "react-dom";
import {Router, Route, browserHistory} from 'react-router'

import {Root} from "./components/Root";
import {Home} from "./components/Home";
import {User} from "./components/User";

class App extends React.Component {
    render() {
        return (
            <Router history={browserHistory}>
                <Route path={"/"} component={Root}>
                    <Route path={"user"} component={User}/>
                    <Route path={"home"} component={Home}/>
                </Route>
            </Router>
        );
    }
}

render(<App />, window.document.getElementById('app'));  

Я пытаюсь переписать код для работы с React Router 4 следующим образом:

import React from "react";
import {render} from "react-dom";
import {Switch, BrowserRouter, Route} from 'react-router-dom'

import {Root} from "./components/Root";
import {Home} from "./components/Home";
import {User} from "./components/User";

class App extends React.Component {
    render() {
        return (
            <BrowserRouter>
                <Switch>
                    <Route path="/" component={Root}>
                        <Route path="/user" component={User}/>
                        <Route path="/home" component={Home}/>
                    </Route>
                </Switch>
            </BrowserRouter>
        );
    }
}

render(<App />, window.document.getElementById('app'));

Это дает мне ошибку:

Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored

Я пытался обернуть дочерние компоненты с <Switch> а также <Root> но это не сработало. Как следует обернуть дочерние компоненты?

Answer 1

В React Router 4 вы больше не вкладываете маршруты. В вашем случае вы можете поместить маршруты в дочерний компонент, например так:

class App extends React.Component {
    render() {
        return (
            <BrowserRouter>
                <Route path="/" component={Root} />
            </BrowserRouter>
        );
    }
}

class Root extends React.Component {
    render() {
        return (
            <div>
                <Route path="/user" component={User}/>
                <Route path="/home" component={Home}/>
            </div>
        );
    }
}

Кроме того, я не думаю, что вам нужно использовать Switch здесь, так как он будет соответствовать только одному первому дочернему маршруту, и он, кажется, не нужен в вашем случае.