現在、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} />
フロントエンドは、管理領域とは異なるレイアウトとスタイルを持っています。そのため、フロントページ内では、ホーム、アバウトなどのルートが子ルートになります。
/home
Frontpage コンポーネントにレンダリングされ、/admin/home
Backend コンポーネント内でレンダリングされる必要があります。
他のバリエーションもいくつか試してみましたが、結局はヒットしなかったり/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から直接ドキュメンテーション。