react-router 4.x 嵌套路由无法展示

Question

项目是使用creat-react-app搭建的
我在index.js中配置了Home和Account 两个子路由，

ReactDOM.render(
  <HashRouter>
    <Switch>
       <Route exact path="/home" component={Home} />
       <Route exact path="/account" component={Account} />
    </Switch>
  </HashRouter>,
document.getElementById('root'));

并且http://localhost:8080/#/home指向了Home这个路由，
在Home组件中我又有三个子组件路由，并按照如下配置

//Home.js

<div className="home_main">
    <Switch>
       <Route exact path="/index" component={HomeIndex} />
       <Route path="/order" component={HomeOrder} />
       <Route path="/assets" component={Assets} />
    </Switch>
</div>

现在遇到的问题就是我输入http://localhost:8080/#/home 进入到了Home组件，但是我访问http://localhost:8080/#/home/index 试图访问HomeIndex这个组件，页面一片空白，就像是访问了一个不存在的路由一样

请问在v4版本下，嵌套路由应该怎么写才是正确的?

Answer 1

把<Route exact path="/home" component={Home} /> exact这个属性去掉
然后

// Home
<div className="home_main">
    <Switch>
       <Route exact path="/home/index" component={HomeIndex} />
       <Route path="/home/order" component={HomeOrder} />
       <Route path="/home/assets" component={Assets} />
    </Switch>
</div>

Answer 2

1、看官方文档：
https://reacttraining.com/rea...
https://reacttraining.com/rea...

2、
简单点

<Switch>
    <Route
        path="/home"
        component={() => {
            return (
                <React.Fragment>
                   <Route exact path="/home" component={HomeIndex} />
                   <Route path="/order" component={HomeOrder} />
                   <Route path="/assets" component={Assets} />
                </React.Fragment>
            );
        }}
    />
</Switch>