web-dev-qa-db-ja.com

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コンポーネントに共通のHeaderコンポーネントが含まれていますが、LoginおよびAboutにはありません。

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

/ page1、/ page2、/ page3を要求すると、ログインコンポーネントは/ loginのみに表示されると予想されます。これらには、それぞれホームコンポーネントとそのページのコンテンツが含まれている必要があります。

代わりに表示されるのは、ログインコンポーネントがレンダリングされ、その下にPage1のコンポーネントがレンダリングされることです。

私は非常に些細な何かを見逃している、またはどこかで本当にばかげた間違いを犯していると確信しています。過去2日間、これにこだわっています。

javascriptreactjsreact-routerreact-router-dom
35
Aditya Talpade

Props this.props.match.pathから取得したURL /パスの一致を使用して、コンポーネントに設定されているパスを取得します。

以下のようにメインルートを定義します

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

定義されたルートは以下のとおりです

  • /ログインする
  • / home
  • / home/one
  • / home/two
  • /約
  • /等

/ home/one/aおよび/ homeのようなHomePageOneでさらにルートをネストしたい場合/ one/b、同じアプローチを進めることができます。

注-1：さらにネストしたくない場合は、prop exactでルートを設定するだけです。

編集（2017年5月15日）

最初はprops.match.urlを使用していましたが、今ではprops.match.pathに変更しました。

ルートのパスでprops.match.pathの代わりにprops.match.urlを使用できるため、トップレベルルートでパスパラメーターを使用する場合、props.match.paramsを介して内部（ネスト）ルートで取得できます。

パスパラメータを使用しない場合は、props.match.urlで十分です

46
Ram Babu S

ルーターv4でスイッチコンポーネントを使用する

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

このコードは、コンポーネントを使用する基本的な考え方を示していると思います。

8
Igor Stetsiura

今週も同じ問題が発生しました。すべてのドキュメント、例、ビデオは以前のバージョンのものであり、バージョン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;
4
Mirdrack

すべての子ルートを親コンポーネントに移動し、以下のようにルートを拡張します。
<Route path={`${match.url}/keyword`} component={Topic}/>
も確認してください react router training

1
Umair Ahmed

次のように使用します。

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のスイッチをオンにする

0
Mushfiq