I have a Layout component that looks like this:
render(){
return(
<a />
<b />
{this.props.children}
)
} then in App.js , router.js is a branch route:
import UserRouter from "user/router.js"
<Layout>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/user" component={UserRouter} />
</Switch>
</Layout>my user directory looks like this:
user/
index/
index.js
user-admin/
index.js
router.js this is the case now. If the path is / user , render the UserRouter component, but because UserRouter is a sub-route, go to user/router.js to match the path:
class UserRouter extends Component{
render(){
return(
<Switch>
<Route path="/user/index" component={UserList} />
<Redirect exact from="/user" to="/user/index" />
</Switch>
)
}
} in this path, if the path is / user , jump directly to / user/index , and then render UserList component.
after trying, I found that when accessing the / user path, I can jump directly to / user/index , but UserList is not loaded? Why is that?