React-router v4 nesting routing issu

this is the outermost route configured in App.jsx

<div className="App">
    <HashRouter>
      <Switch>
         <Route exact path="/" component={() => (
           <Redirect to={`/home/index`}/>
         )} />
         <Route  path="/home" component={Home} />
         <Route  path="/login" component={Login} />
         <Route  path="/account" component={Account} />
       </Switch>
     </HashRouter>
</div>

there are three nested child routes under / home this component

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

now I use this.props.history.push ("/ home/index") to jump to / home/index / home/order / home/assets pages to render components normally
but if I visit this.props.history.push ("/ home") , the subcomponents will not render
I thought of redirecting to / home/index , but I don"t know how to write it. Like App.jsx , Redirect is useless, even leading to / home/index / home/order / home/assets access not rendering

.

I set Redirect to redirect to / home/index report an error in the console, Home component does not show subcomponents

Warning: You tried to redirect to the same route you"re currently on: "/home/index"
<div className="home">
   <Switch>
     <Redirect to={`/home/index`}/>
     <Route  path="/home/index" component={HomeIndex} />
     <Route  path="/home/order" component={HomeOrder} />
     <Route  path="/home/assets" component={Assets} />
   </Switch>
</div>

then I force the jump / home/index

in the componentWillMount hook of Home.jsx .
componentWillMount() {
    this.props.history.push("/home/index")
  }

although it is possible to access / home and jump to / home/index , I don"t think this is the right way to handle it

so I"d like to ask how to display the default subcomponents

when routes are not matched when nesting routes in react-router.

< Redirect to= "/ home/index" from= "/ home" exact / >


do you want to visit / home and enter HomeIndex ?

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

this can be realized

in addition, unless you have special needs, < Route path= "/ home/index" component= {HomeIndex} / > is superfluous

.

Child routes should be written like this

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

look for an answer. Tried to redirect many times

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b2b185-3fff4.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b2b185-3fff4.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?