react-router-dom v4의 여러 네스트 루트

react-router-dom v4의 여러 네스트 루트

react-router-dom에 중첩된 경로가 여러 개 필요합니다.

react-router-dom의 v4를 사용하고 있습니다.

나는 내 것이 있다.

import { BrowserRouter as Router, Route } from 'react-router-dom';

이렇게 렌더링할 컴포넌트가 필요합니다.

--- Login
--- Home
    --- Page 1
    --- Page 2
    --- Page 3
--- About
--- etc

Home 컴포넌트에는 Page1, Page2 및 Page3 컴포넌트에 공통이지만 Login 및 About에는 없는 Header 컴포넌트가 포함되어 있습니다.

내 js 코드는 다음과 같습니다.

<Router>
    <div>
        <Route path='/login' component={Login} />
        <Home>
            <Route path='/page1' component={Page1} />
            <Route path='/page2' component={Page2} />
            <Route path='/page3' component={Page3} />
        </Home>
        <Route path='/about' component={About} />
    </div>
</Router>

로그인 컴포넌트는 /login에서만 표시되어야 합니다./page1, /page2, /page3을 요청하면 각각 Home 컴포넌트와 해당 페이지의 콘텐츠가 포함되어 있어야 합니다.

대신 표시되는 것은 페이지1의 컴포넌트가 렌더링된 로그인 컴포넌트입니다.

제가 뭔가 아주 사소한 것을 놓치고 있거나 정말 바보 같은 실수를 하고 있는 것이 확실하며, 제가 받을 수 있는 모든 도움을 감사히 받겠습니다.난 지난 이틀 동안 이걸 갖고 있었어.

소품에서 얻은 URL/경로 일치 사용this.props.match.path컴포넌트로 설정된 경로를 가져옵니다.

다음과 같이 주요 경로를 정의하십시오.

<Router>
  <div>
    <Route exact path="/" component={DummyIndex} /> {/* Note-1 */}
    <Route path="/login" component={Login} />
    <Route path="/home" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/etc" component={Etc} />
  </div>
</Router>

그럼 인Home컴포넌트, 경로를 정의합니다.

class Home extends Component {
  render() {
    return <div>
      <Route exact path={this.props.match.path} component={HomeDefault} />
      <Route path={`${this.props.match.path}/one`} component={HomePageOne} />
      <Route path={`${this.props.match.path}/two`} component={HomePageTwo} />
    </div>
  }
}

정의된 경로는 다음과 같습니다.

• /discloses(/disclosed.
• /홈
• /home/1
• /home/2
• /에 대해서
• /etc

루트를 더 네스트 하는 경우HomePageOne/home/one/a 및 /home/one/b와 같이 동일한 방법으로 진행할 수 있습니다.

주 1: 더 이상 네스트하지 않으려면 경로를 소품으로 설정하기만 하면 됩니다.exact.

편집(2017년 5월 15일)

저는 처음에props.match.url그리고 이제 그걸 로 바꿨어요.props.match.path.

사용할 수 있습니다.props.match.path대신props.match.url경로 파라미터를 최상위 루트로 사용할 경우 내부(네스트된) 경로로 가져올 수 있도록 경로 경로에서props.match.params.

경로 매개 변수가 없으면props.match.url충분하다

라우터 v4에서 Switch 컴포넌트 사용

<Router>
<Switch>
  <Route path='/login' component={Login} />
  <Route path='/about' component={About} />
  <Home>
    <Route component={({ match }) =>
      <div>
        <Route path='/page1' component={Page1} />
        <Route path='/page2' component={Page2} />
        <Route path='/page3' component={Page3} />
      </div>
    }/>
  </Home>
</Switch>

export default class Home extends Component {
render() {
    return (
      <div className="Home">
          { this.props.children }
      </div>
    )
  }
}

이 코드는 컴포넌트 사용에 대한 기본적인 생각을 보여주는 것 같습니다.

이번 주에도 같은 문제가 있었습니다.모든 문서, 예시, 비디오가 이전 버전이고 버전 4의 문서는 혼란스럽기 때문에 프로젝트는 혼란의 시간을 보내고 있다고 생각합니다.
이게 내가 일을 처리하는 방법이야. 이게 도움이 된다면 알려줘.

import React, { Component } from 'react';

import { BrowserRouter, Route, Switch } from 'react-router-dom';

import Root from './Root';
import Home from './Home';
import About from './About';

import './App.css';

class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <div>
                    <Root>
                       <Switch>
                            <Route exact path="/" component={Home} />
                            <Route path="/home" component={Home} />
                            <Route path="/about" component={About} />
                        </Switch>
                    </Root>
                </div>
            </BrowserRouter>
        );
    }
}

export default App;

다음과 같이 모든 자식 경로를 부모 구성요소로 이동하고 경로를 확장하십시오.
<Route path={`${match.url}/keyword`} component={Topic}/>
리액트 라우터 트레이닝도 체크합니다.

다음과 같이 사용:

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Link to='/create'> Create </Link>
        <Link to='/ExpenseDashboard'> Expense Dashboard </Link>
        <Switch>
          <Route path='/ExpenseDashboard' component={ExpenseDashboard} />
          <Route path='/create' component={AddExpensePage} />
          <Route path='/Edit' component={EditPage} />
          <Route path='/Help' component={HelpPage} />
          <Route component={NoMatch} />
        </Switch>
      </BrowserRouter>
    );
  }
}

GitHub에서 더 보기@ Switch on GitHub

나도 같은 문제가 있어서 이렇게 해결했다.

<BrowserRouter>
          <UserAuthProvider>
            <Root>
              <Switch>
                <GuardRoute type="public" exact path="/" component={Login} />
                <GuardRoute type="private" exact path="/home" component={Home} />
                <GuardRoute
                  type="private"
                  exact
                  path="/home/mascotas"
                  component={Mascotas}
                />

              </Switch>
            </Root>
          </UserAuthProvider>
        </BrowserRouter>

언급URL : https://stackoverflow.com/questions/42984597/multiple-nested-routes-in-react-router-dom-v4