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

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/>기반 요소를 갖추고 있습니다 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

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

---

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

---

2017 년을 맞이하는 사람들을 위해 다음과 같은 새로운 솔루션이 있습니다 IndexRedirect.

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

---

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

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

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

---

해당 문제가 발생했습니다. 일치하는 경로 처리기가 기본 경로 처리기를 원했습니다.

내 솔루션은 와일드 카드를 경로 값으로 사용하는 것입니다. 즉, 경로 정의의 마지막 항목인지 확인하십시오.

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

참고 URL : https://stackoverflow.com/questions/29552601/how-to-set-the-defaultroute-to-another-route-in-react-router