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.