리액트 라우터 스위치의 동작

리액트 라우터 스위치의 동작

(react-router-dom버전: 4.1.1)

작업 루트가 설정되어 있는데 왜 이 루트가<Switch>필요한 경우:

index.displaces를 표시합니다.

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>
        );
    }
}

냉장고 페이지.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[ Fredge ]링크를 클릭하려고 해도 아무 일도 일어나지 않습니다(the Fredge).FridgePage렌더링되지 않음) 및 콘솔에 오류는 출력되지 않습니다.

제가 알기로는 유일하게Switch는 일치하는 첫 번째 루트를 배타적으로 렌더링합니다.이 루트를 생략하면 발생하는 일반적인 문제는 두 페이지를 동시에 렌더링하는 것입니다.만약 나의"/"경로는 정확하고 스위치가 없어도 냉장고는 일치하는 유일한 경로여야 합니다.왜 전혀 렌더링되지 않는 거죠?

<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, 「/fish」루트가 「/fish」등의 「/fish」를 포함한 모든 루트를 잡는 것은 아닙니다.

없이.exact, 「/animals/fish」루트는 「animals/fish/cod」, 「/animals/fish/salmon」등의 Fish 컴포넌트도 반환합니다.

외부에 있는 것<Switch>스테이트먼트와 스테이트먼트 없음exactOrder 구성 요소는 "/animals"를 포함하는 모든 경로에 렌더링됩니다.

---

일반적으로 정확하게 사용하지 않을 경우 와일드카드를 사용하여 임의의 페이지를 반환하지 않습니다.

에 '/'이(가) 없기 때문에 FreecyPage가 렌더링되지 않습니다. 다음 값이어야 합니다.

언급URL : https://stackoverflow.com/questions/45122800/react-router-switch-behavior