리액트 라우터에서 DefaultRoute를 다른 루트로 설정하는 방법

리액트 라우터에서 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는 대시보드 내에서 렌더링해야 하므로 SearchDashboard가 잘못 렌더링됩니다.

"app" 루트 내의 Default Route가 "searchDashboard" 루트를 가리키도록 하겠습니다.리액트 라우터로 할 수 있는 건가요?아니면 일반 Javascript(페이지 리다이렉트용)를 사용해야 하나요?

기본적으로 사용자가 홈페이지로 이동하면 검색 대시보드로 대신 보내고 싶습니다. 것 같습니다.window.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

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

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

2019-08-09 업데이트로 Ogglas를 통한 리프레시 문제 방지

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

출처:

https://stackoverflow.com/a/43958016/3850405

업데이트:

의 경우 v6으로 할 수.Navigate일치 안 함 루트를 사용하여 일치 안 함 케이스를 처리할 수 있습니다.

<Routes>
  <Route path="/" element={<Navigate to="/searchDashboard" />}>
    <Route path="searchDashboard" element={<SearchDashboard/>} />
    <Route
      path="*"
      element={<Navigate to="/" />}
    />
  </Route>
</Routes>

https://reactrouter.com/docs/en/v6/getting-started/tutorial#adding-a-no-match-route

https://stackoverflow.com/a/69872699/3850405

오리지널:

「 」를 <Redirect from="/" to="searchDashboard" />URL이 는, 「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} />

그러나 이렇게 하면 동일한 구성 요소를 렌더링하는 두 개의 다른 경로가 생성됩니다.무의미할 UI에 수 . 스타일링을 할 때가 생길 수 있습니다.<Link/>「」에 한 요소this.history.isActive().

루트를하려면 , 「」( 「」)를 합니다.<IndexRedirect/>

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

이것은 리액트 라우터 1.0.0에 근거하고 있습니다.https://github.com/rackt/react-router/blob/master/modules/IndexRedirect.js 를 참조해 주세요.

업데이트 : 2020

Redirect에 를 추가합니다.path

예:

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

조나단의 대답은 나에게 통하지 않는 것 같았다.React v0.14.0 및 React Router v1.0-rc3을 사용하고 있습니다.이것은 다음과 같습니다.

<IndexRoute component={Home}/>.

그래서 매튜의 경우, 그가 원하는 건

<IndexRoute component={SearchDashboard}/>.

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

최근에 V6이 출시되었기 때문에 V6에는 Redirect가 더 이상 없으므로 승인된 답변이 작동하지 않습니다.Navigate 사용을 고려합니다.

 <Route path="/" element={<Navigate to="/searchDashboard" />} />

참조:- V6 문서

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으로 유도됩니다.

2022년 5월

1. 수입품Navigate

import { Routes, Route, Navigate } from 'react-router-dom';

2. 더하다

<Route path="/" element={<Navigate replace to="/home" />} />

예를 들어 다음과 같습니다.

import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';

import Home from './pages/Home';
import Login from './pages/Login';

const Main = () => {
    return (
        <Routes>
            <Route path="/" element={<Navigate replace to="/home" />} />
            <Route path='home' element={<Home />}></Route>
            <Route path='login' element={<Login />}></Route>
        </Routes>
    );
}

export default Main;

3. 알았어!

비슷한 문제가 발생했습니다.루트 핸들러가 일치하지 않는 경우 디폴트루트 핸들러가 필요했습니다

해결책은 와일드카드를 경로 값으로 사용하는 것입니다.즉, 루트 정의의 마지막 엔트리인지도 확인합니다.

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

먼저 다음을 설치해야 합니다.

npm install react-router-dom;

그런 다음 App.js를 사용하여(이 경우 다를 수 있음) 아래의 수정을 수행해야 합니다.이 경우 적절한 렌더링 프로세스를 얻기 위해 Redirect를 선택했습니다.

import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";

<Router>
        <Suspense fallback={<Loading />}>
          <Switch>
            <Route exact path="/">
              <Redirect to="/Home" component={Routes.HomePage}/>
            </Route>
            <Route exact path="/Biz" component={Routes.Biz} />
          </Switch>
        </Suspense>
      </Router>

위의 수정에 성공하면 리다이렉트 URL이 브라우저 경로에 있고 렌더링 프로세스도 컴포넌트에 따라 올바르게 동작하고 있음을 알 수 있습니다.

얼마 전 리액트라우팅에 Default Route라는 컴포넌트를 사용할 기회가 있었습니다.

감가상각된 방법으로는 그다지 널리 사용되지 않습니다.default 등의 커스텀루트를 작성할 수 있지만, 현대의 React.js 개발에서는 아직 그렇게 하고 있지 않습니다.

"Default Route" 루트를 사용하면 렌더링 문제가 발생할 수 있기 때문에 반드시 피하고 싶습니다.

이렇게 하는 거야

<Router>
  <div className="App">
    <Navbar />
    <TabBar />
    <div className="content">
      <Route exact path={["/default", "/"]}> //Imp
        <DefStuff />
      </Route>
      <Route exact path="/otherpage">
        <Otherstuff />
      </Route>
      <Redirect to="/defult" /> //Imp
    </div>
  </div>
</Router>

용도:

<Route path="/" element={<Navigate replace to="/expenses" />} />

컨텍스트:

import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";

<BrowserRouter>
  <Routes>
    <Route element={<App />}>
      <Route path="/expenses" element={<Expenses />} />
      <Route path="/invoices" element={<Invoices />} />
    </Route>
    <Route path="/" element={<Navigate replace to="/expenses" />} />
  </Routes>
</BrowserRouter>

이렇게 하면 특정 URL에서 리디렉션하고 이전 라우터에서 새 라우터로 리디렉션한 후 구성 요소를 렌더링할 수 있습니다.

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

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