개시하다

프로그래밍 경력 2개월의 문외한이 쓰고 있다.(오류가 있으면 표시)
WesBos.com의 온라인 동영상 수업에서 React를 배웁니다.
비디오는 다음과 같습니다.
https://reactforbeginners.com/
"React Router"에 대한 학습 노트입니다.

원래 로터는...

React뿐만 아니라 웹 페이지는'클라이언트로부터의 URL 요청'과'서버가 그것에 응답하는 응답'으로 구성되어 있다.

　＝＝URLリクエスト＝＝　 < このページくれ )
　　　　↓　　↑
＝＝サーバからのレスポンス＝＝　< おっけ〜 )

어떤 URL과 어떤 요청이 연결되었는지 설정합니다. 이것은 로터의 작업입니다.

React Router 정보

다음 명령을 사용하여 설치할 수 있습니다.

네트워크에서 개발된 경우react-router-dom

응용 프로그램 개발을 사용할 때react-router-native.

$ npm install -S react-router-dom

또한 다음과 같이 사용합니다.
(가져오기BrowserRouter, Route, Switch 3개)

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

Router 사용 방법

Router.js

const Router = () => (
    <BrowserRouter>
        <Switch>
            <Route exact path="/" component={StorePicker} />
            <Route path="/store/:storeID" component={App} />
            <Route component={NotFound} />
        </Switch>
    </BrowserRouter>
);

<BrowserRouter> 정보

React Router는 <BrowserRouter> 또는 <HashRouter>의 어셈블리를 사용합니다.
전자는 HTML5의 History API를 사용하고 후자는 window를 사용합니다.location을 사용합니다.
오래된 브라우저를 지원해야 한다면 후자를 사용해야 합니다.
전자의history 대상은 루트 구성 요소에서props로 수신할 수 있습니다.

<Switch> 정보

<Switch> url에 맞는 첫 번째 루트만 표시합니다.(이것은 "Exclussive(배타적)"라고 함)
만약 <Switch> 없다면, 일치하는 것을 나타낸다.

<Route> 정보

Router.js

<Route exact path="/" component={StorePicker} />

path = "URL": 요청 URL(루트 경로)

exact path = "URL": 정확히 일치하는 경우

component = {구성 요소 이름}: URL이 일치할 때 표시되는 구성 요소

경로가 지정되지 않은 경우: 404페이지 Not Fond

history 속성 정보

Router에 연결된 구성 요소는 자동으로 history 속성을 부여합니다.
브라우저 유효성 검사 도구를 사용하여 확인할 수도 있습니다.몇 가지 방법이 안에 편입되었는지 알 수 있다.

history 대상은 루트 구성 요소에서props로 수신할 수 있습니다.

props.history.push () 방법 정보

서브어셈블리에서 라우트에 액세스하려면 를 사용합니다.

props.history.push(`/store/123`); //引数はルートからのパス

총결산

요약: React Router.
앞으로 로터 관계를 조사했다면 여기서 추서할 겁니다.