리액트 라우터의 동일한 컴포넌트에 대한 다중 경로 이름

리액트 라우터의 동일한 컴포넌트에 대한 다중 경로 이름

3개의 다른 루트에 동일한 컴포넌트를 사용하고 있습니다.

<Router>
    <Route path="/home" component={Home} />
    <Route path="/users" component={Home} />
    <Route path="/widgets" component={Home} />
</Router>

다음과 같이 결합할 수 있는 방법이 있습니까?

<Router>
    <Route path=["/home", "/users", "/widgets"] component={Home} />
</Router>

react-router v4.4.0-beta.4 이후 및 공식적으로 v5.0.0에서는 컴포넌트로 해결되는 경로의 배열을 지정할 수 있습니다.

<Router>
    <Route path={["/home", "/users", "/widgets"]} component={Home} />
</Router>

배열의 각 경로는 정규 표현 문자열입니다.

이 어프로치에 관한 메뉴얼은, 여기를 참조해 주세요.

리액트 라우터 v6 업데이트

React Router v6에서는 경로 배열을 Route 속성으로 전달할 수 없게 되었습니다.대신, 를 사용할 수 있습니다.useRoutes(매뉴얼에 대해서는 여기를 참조) 리액트 훅을 사용하여 동일한 동작을 수행합니다.

import React from "react";
import {
  BrowserRouter as Router,
  useRoutes,
} from "react-router-dom";

const element = <Home />;
const App = () => 
 useRoutes(['/home', '/users', '/widgets'].map(path => ({path, element})));

const AppWrapper = () => (
    <Router>
      <App />
    </Router>
  );

이 코드가 기능하는 확장 예를 여기서 볼 수 있습니다.

이 답변의 요점은 다음과 같습니다.

useRoutes 훅은 다음과 같은 기능을 합니다.<Routes>단, 이 오브젝트는 대신 JavaScript 오브젝트가 사용됩니다.<Route>루트를 정의합니다.

적어도 리액트 라우터 v4에서는path는 정규 표현 문자열이 될 수 있으므로 다음과 같은 작업을 수행할 수 있습니다.

<Router>
    <Route path="/(home|users|widgets)/" component={Home} />
</Router>

보다시피 좀 장황한 표현이기 때문에 만약...component/route이렇게 간단해서 아마 그럴 가치가 없을 거예요.

물론 실제로 이러한 문제가 자주 발생하는 경우 어레이를 포함하는 래핑 컴포넌트를 언제든지 생성할 수 있습니다.pathsparameter, regex 또는.map논리를 펴다

리액트 라우터의 버전이 v4보다 낮은 경우는 그렇지 않다고 생각합니다.

를 사용할 수 있습니다.map다른 JSX 컴포넌트와 마찬가지로 다음과 같습니다.

<Router>
    {["/home", "/users", "/widgets"].map((path, index) => 
        <Route path={path} component={Home} key={index} />
    )}
</Router>

편집

react-router v4 패스가 path-to-regexp에서 지원되는 경우 regex를 사용할 수도 있습니다.자세한 내용은 @Cameron의 답변을 참조하십시오.

리액트 라우터 v6에서는 regex 옵션이 삭제되어 유형 정의에 따라 regex 옵션이 다시 삭제됩니다.path: string현재 각 경로의 철자를 다시 입력하거나 편의를 위해 지도를 사용해야 합니다.

<Routes>
    {['home', 'users', 'widgets'].map(path => <Route path={path} element={<Home />} />)}
</Routes>

https://reactrouter.com/docs/en/v6/upgrading/v5#note-on-route-path-patterns 도 참조해 주세요.

react-route-dom v5.1.2에서는 다음과 같이 여러 경로를 통과할 수 있습니다.

 <Route path={"/home" | "/users" | "/widgets"} component={Home} />

그리고 기본적으로 위에 Home jsx 파일을 Import해야 합니다.

기타 옵션: 루트 프리픽스를 사용합니다. /pages예를들면.얻을 수 있을 것이다

• /pages/home
• /pages/users
• /pages/widgets

그런 다음 이 문제를 상세하게 해결합니다.Home요소.

<Router>
  <Route path="/pages/" component={Home} />
</Router>

리액트 라우터 v6에서는 다음과 같이 할 수 있습니다.

<Routes>
  {['path1', 'path2'].map((path) => (
            <Route path={path} element={<SomeComponent />} />
  ))}
</Routes>

react-paramed docs는 다음과 같이 말합니다.

Router v6를 존중합니다. <Route path>에서는 2종류의 홀더만 v6는 의 플레이스 홀더입니다.이이:id- 스타일 파라미터 및*와일드 카드

https://reactrouter.com/docs/en/v6/upgrading/v5#note-on-route-path-patterns

React Router 문서에 따르면 proptype 'path'는 type string입니다.따라서 루트 컴포넌트에 어레이를 소품으로 전달할 수 없습니다.

루트만 변경하는 경우 다른 루트에 대해 동일한 컴포넌트를 사용할 수 있습니다.

.paths되는 여러 react-router v6, 함 vpath 추가:

const normalizeRoutes = (routes) =>
  routes.reduce((acc, curr) => {
    const newRoute = curr.children
      ? { ...curr, children: normalizeRoutes(curr.children) }
      : curr;
    if (newRoute.paths) {
      return [
        ...acc,
        ...newRoute.paths.map((path) => {
          const { paths, ...rest } = newRoute;
          return { ...rest, path };
        })
      ];
    }
    return [...acc, newRoute];
  }, []);

경로에서 루트를 몇 개 추가할 필요가 있는 경우

APP에서 다음과 같은 기본 경로 추가

<Routes>
  <Route path='/dashboard' element={<Dashboard/>} />
  <Route path='*' element={<NotFound/>} />
</Routes>

여기서 라우팅된 /대시보드 경로 및 Dashboard 컴포넌트를 호출합니다.

그런 다음 대시보드 구성 요소에서 다음과 같은 몇 가지 정확한 경로를 추가합니다.

return (
  <Routes>
    <Route exact path='/' element={<Client/>} />
    <Route exact path='/user' element={<One/>} />
    <Route exact path='/role' element={<Two/>} />
    <Route path='*' element={<NotFound/>} />
  </Routes>
)

여기서 라우팅되는 정확한 경로, "/"는 "/filename"을 의미합니다.

/discloses(/disclosed.

/syslog/user

/syslog/역할

react-router-domxpxp regexp ge gege를ge 。대안은 컴포넌트를 변수에 저장하고 그것을 많은 루트의 컴포넌트로 사용하는 것입니다.

let home= <Home />

<Route path={"/home" | "/users" | "/widgets"} component={Home} />

return <Routes>
        <Route path="/home" element={home} />
        <Route path="/users" element={home} />
        <Route path="/widgets" element={home} />
    </Routes>

언급URL : https://stackoverflow.com/questions/40541994/multiple-path-names-for-a-same-component-in-react-router