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");

DefaultRoute 대신 Redirect를 사용할 수 있습니다.

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

업데이트 문제를 피하기 위해 2019-08-09 업데이트 대신 Ogglas 덕분에 이것을 사용하십시오.

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

사용시 문제 <Redirect from="/" to="searchDashboard" />는 다른 URL이 /indexDashboard있고 사용자가 새로 고침을 누르거나 URL이 전송되면 사용자가 /searchDashboard어쨌든 리디렉션된다는 것입니다.

사용자가 사이트를 새로 고치거나 URL을 보낼 수 없도록하려면 다음을 사용하십시오.

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

searchDashboard로그인 뒤에있는 경우 사용 :

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

다음을 사용하여 기본 경로를 잘못 만들려고했습니다.

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

그러나 이것은 동일한 구성 요소를 렌더링하는 두 개의 다른 경로를 만듭니다. 이것은 무의미 할뿐만 아니라 .NET <Link/>기반 요소를 스타일링 할 때 UI에 결함을 일으킬 수 있습니다 this.history.isActive().

기본 경로 (인덱스 경로가 아님)를 만드는 올바른 방법은 다음을 사용하는 것입니다 <IndexRedirect/>.

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

이것은 react-router 1.0.0을 기반으로합니다. https://github.com/rackt/react-router/blob/master/modules/IndexRedirect.js를 참조 하십시오 .

Jonathan의 대답은 저에게 효과가없는 것 같습니다. React v0.14.0과 React Router v1.0.0-rc3을 사용하고 있습니다. 이것은 :

<IndexRoute component={Home}/>.

따라서 Matthew의 경우에는 그가 원할 것이라고 생각합니다.

<IndexRoute component={SearchDashboard}/>.

출처 : https://github.com/rackt/react-router/blob/master/docs/guides/advanced/ComponentLifecycle.md

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

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

이렇게하면 로컬 호스트에서 서버를로드 할 때 / something으로 리디렉션됩니다.

업데이트 : 2020

리디렉션을 사용하는 대신 단순히 여러 경로를 path

예:

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

2017 년에 접어 들면 다음과 같은 새로운 솔루션이 제공됩니다 IndexRedirect.

<Route path="/" component={App}>
  <IndexRedirect to="/welcome" />
  <Route path="welcome" component={Welcome} />
  <Route path="about" component={About} />
</Route>

 <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>
    <Redirect from="/*" to="/" />
  </Route>

선호하는 방법은 반응 라우터 IndexRoutes 구성 요소 를 사용하는 것입니다.

다음과 같이 사용합니다 (위에 링크 된 반응 라우터 문서에서 가져옴).

<Route path="/" component={App}>
    <IndexRedirect to="/welcome" />
    <Route path="welcome" component={Welcome} />
    <Route path="about" component={About} />
</Route>

이렇게 사용하여 특정 URL에서 리디렉션하고 이전 라우터에서 새 라우터로 리디렉션 한 후 구성 요소를 렌더링합니다.

<Route path="/old-router">
  <Redirect exact to="/new-router"/>
  <Route path="/new-router" component={NewRouterType}/>
</Route>