web-dev-qa-db-ja.com

React Router v4は複数のルートをレンダリングします

SPAを作成していて、react-router-domパッケージバージョン4.1.1を使用してアプリケーションでルーティングを設定しようとしています。

私のルート定義は以下の通りです：

<BrowserRouter>
  <div>
    <Route exact path="/" component={Login} />
    <Route path="/login" component={Login} />
    <Route path="404" component={NotFound} />
    <Route path="*" component={NotFound} />
  </div>
</BrowserRouter>

基本的に、ルートが定義されていないページへのリクエストが{NotFound}コンポーネントに送られるように、ルーティングをセットアップします。

どうすればこれを達成できますか？上記のソリューションは、/loginページをリクエストするときに、LoginとNotFoundコンポーネントの両方をレンダリングします。

敬具

reactjsreact-routerreact-router-dom
14
Complexity

公式チュートリアル の例です。複数のルートのレンダリングを回避する方法

import { Switch, Route } from 'react-router

    <Switch>
      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/:user" component={User}/>
      <Route component={NoMatch}/>
    </Switch>
26
Taras Yaremkiv

Switchを使用してルートの最初の一致をレンダリングします。使用する前にSwitchをインポートする必要があります

import {Switch} from 'react-router';

<BrowserRouter>
  <Switch>
    <Route exact path="/" component={Login} />
    <Route path="/login" component={Login} />
    <Route path="404" component={NotFound} />
    <Route path="*" component={NotFound} />
  </Switch>
</BrowserRouter>

docs

<Switch>は、ルートを排他的にレンダリングするという点でユニークです。対照的に、場所に一致するすべての<Route>は包括的にレンダリングされます。

/loginにいる場合、<Switch>は一致する<Route>の検索を開始します。 <Route path="/login"/>は一致し、<Switch>は一致の検索を停止し、<Login>をレンダリングします。それ以外の場合、ルートは/loginと/loginおよび*と一致し、両方のルートをレンダリングします

ただし、[ルートの順序を切り替える]を使用する場合は、他のルートの後にプレフィックスルートを追加していることを確認してください。たとえば「/ home」はルート順で「/」の後に指定する必要があります。そうでない場合は、exact propを使用できます

 <Switch>
    <Route exact path="/" component={Login} />
    <Route path="/home" component={Home} />
  </Switch>
11
Shubham Khatri

NotFoundページは<Route path="*" component={NotFound} />ルールのためにレンダリングされると思います。ルーターのパスプロパティはを受け入れ、正規表現へのパスが理解できる任意の有効なURLパスを指定します

0
Serg