web-dev-qa-db-ja.com

Reactルータースイッチの動作

（react-router-domバージョン：4.1.1）

作業ルートを設定していますが、<Switch>が必要でした：

index.js

import React from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';

import App from './components/App.jsx';
import FridgePage from './components/FridgePage.jsx';

ReactDOM.render(
    <HashRouter>
        <Switch>
            <Route exact path="/" component={App} />
            <Route path="/fridge" component={FridgePage} />
        </Switch>
    </HashRouter>,
    document.getElementById('root')
)

App.jsx

import Header from './Header.jsx';
import {Link} from 'react-router-dom';

export default class App extends React.Component {
    render() {
        console.log(this.props);
        return (
            <div>
                <h1>Herbnew</h1>
                <Link to="fridge">Fridge</Link>
                {this.props.children}
            </div>
        );
    }
}

FridgePage.jsx

import React from 'react';

export default class FridgePage extends React.Component {
    render() {
        return (
            <div>
                <h1>Fridge</h1>
                You finally found the fridge!
            </div>
        );
    }
}

以前は、divの代わりにSwitchでルートをラップしていました。その場合、Appが表示され、Fridgeリンクをクリックしようとしますが、何も起こりません（FridgePageは表示されません）。コンソールにエラーは出力されません。

私が理解するように、Switchが行う唯一のことは、一致する最初のルートを排他的にレンダリングすることであり、省略した結果として共通の問題は両方のページを一度にレンダリングすることです。もし私の "/"ルートは正確です。スイッチがない場合でも、一致するルートは冷蔵庫だけです。なぜまったくレンダリングされないのですか？

reactjsreact-routerreact-router-v4react-router-dom
22
Jess

<Switch>は、最初に一致したルートを1つだけ返します。

exactは、完全に一致する任意の数のルートを返します。

例えば：

<Switch>
  <Route exact path="/animals" component={Animals} />
  <Route path="/animals/fish" component={Fish} />
  <Route component={Missing} />
</Switch>
<Route path="/animals" component={Order} />

Missingコンポーネントが<Switch>内にない場合、すべての単一ルートで返されます。

exactを使用すると、「/ animals」ルートは「animals/fish」などの「/ animals」を含むすべてのルートをキャッチしません。

exactがない場合、「/ animals/fish」ルートは、「animals/fish/cod」、「/ animals/fish/salmon」などのFishコンポーネントも返します。

<Switch>ステートメントの外側にあり、exactなしで、Orderコンポーネントは「/ animals」を含むすべてのパスでレンダリングされます。

通常、完全一致を使用していない場合はワイルドカードを使用するため、ランダムなページは返されません。

34
awc737