React-router 4.x nested routes cannot be displayed

items are built using creat-react-app
I have configured Home and Account two child routes in index.js,

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

and http://localhost:8080/-sharp/home points to Home this route, and
I have three more sub-component routes in the Home component, and configure them as follows

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

The problem with

now is that I enter http://localhost:8080/-sharp/home into the Home component, but I visit http://localhost:8080/-sharp/home/index to try to access HomeIndex this component, and the page is blank, as if I had visited a route that does not exist

how should nested routing be written correctly in v4 version?

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

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