1

反応ルーター v3 を使用して、次のルート構成があります。

<Route component={App}>
  <Route path="login" component={Login} />
  <Route path="logout" component={Logout} />
  <Route path="/" component={Admin}>
    <IndexRoute component={Dashboard} />
    <Route path="profile" component={Profile} />
  </Route>
</Route>

v4を使用して次のことを試しました：

<Router>
  <div id="app">
    <Match pattern="/login" component={Login} />
    <Match pattern="/logout" component={Logout} />
    <Match pattern="/" component={Admin} />
  </div>
</Router>

および内部Adminコンポーネント:

<div id="admin">
  <Match pattern="/" component={Dashboard} />
  <Match pattern="/profile" component={Profile} />
</div>

問題：

  1. にアクセスする/loginと、Adminコンポーネントも一致します。
  2. に変えてみました<Match pattern="/" exactly component={Admin} />。Adminコンポーネントでサブマッチをレンダリングしません。だから私が訪れたとき/profile、それは一致しません。
4

2 に答える 2

1

ネスティングは v4 ではまだ少し不安定ですが、まだアルファ版であるため、それほど予期しないことではありません。

コードを定義したので、必要なことを行う良い方法はありません。考えられる解決策の 1 つはwithAdmin、ラップされたコンポーネントの管理 HTML をレンダリングする高次のコンポーネントを用意することです。

const withAdmin = (Component) => {
  return (matchProps) => (
    <div id="admin">
      <Component {...matchProps} />
    </div>
  )
}

次のように使用します。

<Router>
  <div id="app">
    <Match pattern="/login" component={Login} />
    <Match pattern="/logout" component={Logout} />
    <Match exactly pattern="/" component={withAdmin(Dashboard)} />
    <Match pattern="/profile" component={withAdmin(Profile)} />
  </div>
</Router>

理想的ではありませんが、うまくいくはずです。

最終バージョンには、<Match___>パターンの配列を受け入れ、最初に一致したパターンに関連付けられたコンポーネントのみをレンダリングするコンポーネントが含まれる可能性もあります。それはあなたの問題に対する本当の解決策ですが、まだ存在していません。

<Match___ routes={[
  { pattern: '/login', component: Login },
  { pattern: '/logout', component: Logout },
  { pattern: '/', component: Admin }
]} />
于 2016-12-29T19:24:41.003 に答える