☰

React Router v4 / v5 を使用したネストされたルート 質問する

tag-icon • tag-icon javascript reactjs nested react-router react-router-v4
React Router v4 / v5 を使用したネストされたルート 質問する

現在、React Router v4 を使用してルートをネストするのに苦労しています。

最も近い例は、React-Router v4 ドキュメント。

アプリを 2 つの異なる部分に分割したいです。

フロントエンドと管理領域。

私は次のようなことを考えていました:

<Match pattern="/" component={Frontpage}>
  <Match pattern="/home" component={HomePage} />
  <Match pattern="/about" component={AboutPage} />
</Match>
<Match pattern="/admin" component={Backend}>
  <Match pattern="/home" component={Dashboard} />
  <Match pattern="/users" component={UserPage} />
</Match>
<Miss component={NotFoundPage} />

フロントエンドは、管理領域とは異なるレイアウトとスタイルを持っています。そのため、フロントページ内では、ホーム、アバウトなどのルートが子ルートになります。

/homeFrontpage コンポーネントにレンダリングされ、/admin/homeBackend コンポーネント内でレンダリングされる必要があります。

他のバリエーションもいくつか試してみましたが、結局はヒットしなかったり/home、 になったりしました/admin/home。

ベストアンサー1

react-router-v4 では をネストしません<Routes />。代わりに、別の の中に を配置します<Component />。

例えば

<Route path='/topics' component={Topics}>
  <Route path='/topics/:topicId' component={Topic} />
</Route>

なるべきです

<Route path='/topics' component={Topics} />

と

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <Link to={`${match.url}/exampleTopicId`}>
      Example topic
    </Link>
    <Route path={`${match.path}/:topicId`} component={Topic}/>
  </div>
)

がここにあります基本的な例react-routerから直接ドキュメンテーション。

おすすめ記事