React-router: How to set a default child route

[guoxiangwen]

entry.js

      <Switch>
        <Route path="/console" component={Console} />
        <Route path="/" component={Home} />
      </Switch>

console.js

              <Route path={`${consolePath}/project_detail`} component={ProjectDetail} />
              <Route exact path={`${consolePath}/app`} component={AppList} />
              <Route path={`${consolePath}/app/:id`} component={AppDetail} />

              <Route exact path={`${consolePath}/contacts`} component={ContactsList} />
              <Route path={`${consolePath}/contacts/:id`} component={ContactsDetail} />

              <Route path={`${consolePath}/logs`} component={LogList} />


            </Content>

when i link to /console i want to default get /console/project_detail . what should i do?

[pshrmn]

You can add a <Redirect> that redirects to the desired location.

// console.js
<Content>
  <Switch>
    <Redirect exact from={`${consolePath}`} to={`${consolePath}/project_detail`} />
    <Route path={`${consolePath}/project_detail`} component={ProjectDetail} />
    {/* ... */}
  </Switch>
</Content>

Please note that the <Switch> is important for this. Otherwise, the <Redirect> will redirect every time it renders (e.g. for every route, not just /console).

[guoxiangwen]

thanks . most of answers is

<Route path="/a" render={() => <Redirect to="/a/b" />} />

but i need components because, /console contains some dom that will show in /console/project_detail