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