问带有React路由器4的嵌套交换机和默认子路由

EN

import React from "react";
import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";

const Settings = () => (<div>Settings</div>);
const ArticleAuthors = () => (<div>ArticleAuthors</div>);
const ArticleDetail = () => (<div>ArticleDetail</div>);

const Articles = () => (
    <div>
        Articles
        <Switch>
            <Route path="/articles/:article_id/details" component={ArticleDetail} />
            <Route path="/articles/:article_id/authors" component={ArticleAuthors} />
            <Redirect from="/articles/:article_id" to="/articles/:article_id/details" exact />
        </Switch>
    </div>
);


const App = () => (
    <Router>
        <Switch>
            <Route path="/articles" component={Articles} />
            <Route path="/settings" component={Settings} />
            <Redirect from="/" to="/articles" exact />
        </Switch>
    </Router>
);

export default App;