[javascript] React Router에서 DefaultRoute를 다른 경로로 설정하는 방법

다음이 있습니다.

  <Route name="app" path="/" handler={App}>
    <Route name="dashboards" path="dashboards" handler={Dashboard}>
      <Route name="exploreDashboard" path="exploreDashboard" handler={ExploreDashboard} />
      <Route name="searchDashboard" path="searchDashboard" handler={SearchDashboard} />
      <DefaultRoute handler={DashboardExplain} />
    </Route>
    <DefaultRoute handler={SearchDashboard} />
  </Route>

DefaultRoute를 사용할 때 모든 * Dashboard가 Dashboard 내에서 렌더링되어야하므로 SearchDashboard가 잘못 렌더링됩니다.

“app”Route 내의 DefaultRoute가 Route “searchDashboard”를 가리 키도록하고 싶습니다. 이것이 내가 React Router로 할 수있는 일입니까, 아니면 일반적인 Javascript (페이지 리디렉션 용)를 사용해야합니까?

기본적으로 사용자가 홈 페이지로 이동하면 대신 검색 대시 보드로 보내려고합니다. 그래서 저는 다음과 같은 React Router 기능을 찾고 있다고 생각합니다.window.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

답변

<Redirect from="/" to="searchDashboard" />

<Redirect exact from="/" to="searchDashboard" />

<Route exact path="/" render={() => (
    <Redirect to="/searchDashboard"/>
)}/>

<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/searchDashboard"/>
  ) : (
    <Redirect to="/login"/>
  )
)}/>

<IndexRoute component={DefaultComponent} />
<Route path="/default-path" component={DefaultComponent} />

<IndexRedirect to="/default-path" />
<Route path="/default-path" component={DefaultComponent} />

import { Route, Redirect } from "react-router-dom";

class App extends Component {
  render() {
    return (
      <div>
        <Route path='/'>
          <Redirect to="/something" />
        </Route>
//rest of code here

<Route exact path={["/","/defaultPath"]} component={searchDashboard} />

<Route path="/" component={App} >
    <IndexRoute component={HomePage} />
    <Route path="about" component={AboutPage} />
    <Route path="home" component={HomePage} />
    <Route path="*" component={HomePage} />
</Route>