react 라우터🔀

안녕하십니까?네가 잘했으면 좋겠어. 오늘 우리는 반응 공유기를 토론할 거야.
react router는 웹 응용 프로그램에서 루트를 처리할 수 있는 라이브러리입니다.

왜 우리는 노선이 필요합니까?🤷‍♂️

왜 우리가 경로를 필요로 하는지 알고 싶을 수도 있습니다. 만약 우리가 SPA를 개발하고 있다면, 당신이 표시하고자 하는 구성 요소를 바꾸기 위해 상태 기반 렌더링을 사용하고 있을 수도 있습니다. 그러나...우리의 응용 프로그램이 더 크고 복잡해질 때 무슨 일이 일어날까요?
이런 조건의 렌더링은 이해, 관리, 유지보수가 어려워질 수 있다.

파일 기준:

구성 요소는 React의 강력한 성명성 프로그래밍 모델의 핵심입니다.React Router는 응용 프로그램과 설명 방식으로 구성된 내비게이션 구성 요소입니다.
react router를 사용하면 다음을 수행할 수 있습니다.
1. 경로에 따라 렌더링할 어셈블리를 정의합니다.
2. - 브라우저의 뒤로 및 앞으로 버튼을 사용합니다.

react 공유기의 주요 구성 요소

1. BrowserRouter: 이 구성 요소는 동적 서버가 있는 프로그램에 사용됩니다. 이 서버는 어떤 종류의 URL을 처리하는지 알고 있습니다.이것은 우리 서버가 반드시 정확하게 설정해야 한다는 것을 의미한다.구체적으로 말하자면, 우리의 웹 서버는reactrouter 클라이언트가 관리하는 모든 URL에 같은 페이지를 제공해야 한다.

역사📍

우리가 알아야 할 중요한 것은 우리의 공유기가 현재 위치를 추적하는 데 사용할 역사적 대상을 만들 것이다.
2. - 루트:react 공유기의 관건적인 부분으로 위치와 루트 경로가 일치할 때 일부 내용을 과장하는 것이 주요 직책이다.라우팅에는 다음과 같은 세 가지 매개변수가 필요합니다.
논점
묘사
정확했어
는 지정된 어셈블리를 렌더링하려면 지정된 경로가 정확해야 함을 나타내는 부울 속성입니다.
경로
현재 위치의 경로와 같은 문자열입니다.
구성 요소 *
렌더링할 구성 요소
* 경로가 일치하는 경우 렌더링할 항목을 지정할 수 있는 다른 방법도 있지만 나중에 논의합니다.
링크: 응용 프로그램 주위의 설명적이고 접근 가능한 내비게이션을 제공합니다.
링크는 두 가지 속성이 있습니다: to와replace.
논점
묘사
... 에 이르다
문자열, 대상 또는 함수일 수 있습니다. 프로그램이 어느 경로로 바뀌었는지 알려 줍니다.
대신
선택 가능한 부울 값입니다. true일 경우, 새 항목을 추가하지 않고 역사 스택의 현재 항목을 대체합니다.
4. 방향 변경: 렌더링이 새 위치로 이동합니다.새 위치는 역사 창고의 현재 위치를 덮어씁니다. 예를 들어 사용자가 로그인하고 로그인 페이지로 내비게이션을 시도했을 때 의미가 없기 때문에 만약 그가 이렇게 하려고 한다면 우리는 그를 홈페이지로 다시 정할 수 있습니다.
5. - 전환: 구성 요소를 사용하여 라우팅/리디렉션을 포장할 수 있으며, 위치와 일치하는 첫 번째 하위 레벨을 렌더링/리디렉션합니다.
일련의 노선만 사용하는 것과 무엇이 다릅니까?
고유성은 라우팅을 독점적으로 렌더링하는 것입니다.

설치🔧

npm install --save react-router

설치 프로그램⚙️

인코딩을 시작합니다. 우선 몇 개의 구성 요소를 만들어서 공유기를 시작합니다. 구성 요소 폴더와 3개 구성 요소 안에 로그인, 홈페이지, 대시보드를 만듭니다.

마지막 그림에서components 폴더와 모든 구성 요소의 폴더를 볼 수 있습니다. 현재 저는 스타일을 위한 파일을 만들지 않았습니다. 잠시 후에 다시 하겠습니다. 구성 요소 파일을 이름으로 바꾸고 싶습니다.구성 부분하지만 너는 마음대로 이름을 지을 수 있다.
구성 요소는 매우 간단할 것입니다. 우리는 구성 요소의 이름만 렌더링하고 싶습니다.

import React from 'react';

const Login = () => {
  return(
    <div>This is Login Page</div>
  )
}

export default Login;

이제 응용 프로그램으로 넘어가겠습니다.우리는 이곳에서 우리의 구성 요소와 공유기 구성 요소를 가져올 것이다.우선 BrowserRouter로 모든 내용을 포장합니다. 우선 구성 요소를 탐색하기 위한 링크를 몇 개 만들고 루트를 지정하고 테스트를 진행합니다. 이것은 저희 프로그램의 코드입니다.js.

import React from 'react';
import { 
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'
import './App.css';

import Login from './components/login/login.component';
import Home from './components/home/home.component';
import Dashboard from './components/dashboard/dashboard.component';

function App() {
  return (
    <Router>
      <div>
      <Link to="/login">Login</Link><br/>
      <Link to="/home">Home</Link><br/>
      <Link to="/dashboard">Dashboard</Link><br/>
      </div>
      <Route exact path='/login' component={Login}/>
      <Route exact path='/home' component={Home}/>
      <Route exact path='/dashboard' component={Dashboard}/>
    </Router>
  );
}

export default App;

보시다시피 변경 사항을 저장하면 브라우저에서 우리의 링크를 보고 구성 요소를 탐색할 것입니다. 그러나 이외에도 로그인 링크를 누르면 우리의 URL과 페이지의 내용이 변경됩니다. 우리의 링크 아래에서 우리의 로그인 구성 요소를 볼 수 있습니다.
나머지 링크를 클릭하면 URL이 표시되는 구성 요소에 따라 변경될 수 있습니다.

좋습니다. 라우터가 예상대로 작동하고 있습니다. 라우팅의 정확한 매개 변수가 어떻게 작동하는지 보여 주십시오. 우선 주 구성 요소의 라우팅 경로를 변경하고, 주 구성 요소의 링크를 변경하며, 라우팅에서 정확한 매개 변수를 삭제하십시오. 이것은 새 코드입니다.

function App() {
  return (
    <Router>
      <div>
        <Link to="/">Home</Link><br/>
        <Link to="/login">Login</Link><br/>
        <Link to="/dashboard">Dashboard</Link><br/>
      </div>
      <Route exact path='/' component={Home}/>
      <Route exact path='/login' component={Login}/>
      <Route exact path='/dashboard' component={Dashboard}/>
    </Router>
  );
}

우리가 지금 보고 있는 바와 같이, 우리의 메인 구성 요소는 항상 볼 수 있다. 왜냐하면 그것의 경로 ("/") 는 모든 상황에서 브라우저의 URL과 일치하기 때문이다.

렌더링 어셈블리에 전달되는 매개변수입니다.

중요한 것은 루트를 통해 나타나는 모든 구성 요소는 역사, 위치, 일치 등 3개의 매개 변수를 전달할 수 있다는 것이다.

다음은 우리 매개 변수에서 가장 자주 사용하는 속성에 대한 설명입니다.
논점
묘사
성냥
⬇️
url
구성 요소가 일치하기 전의 URL입니다. 따라서 구성 요소와 관련된 경로가 "/"이지만, http://localhost:3000/ 또는 http://localhost:3000/topics/details/something 로 이동하면 일치하는 대상 내의 URL은 "/"입니다. 일치하기 전의 URL이기 때문입니다.
경로
우리의 노선이 일치해야 하는 모델이다. 이것은 우리가 노선에서 지정한 경로를 의미한다.
isExact 회사
전체 URL이 일치할 패턴과 일치하면true로 바뀝니다.
매개 변수
url 매개 변수의 대상입니다."/topics/:topicId"경로가 있다고 가정하십시오. "/topics/"다음에 ":topicId"경로가 있습니다. 이것은 그 다음에 URL을 동적으로 변경할 수 있음을 의미합니다.우리는 이 매개 변수를 사용하여 데이터베이스에서 데이터를 얻거나 프로젝트의 제목이라면 구성 요소에 이 제목을 표시할 수 있습니다.
역사
⬇️
밀다
react 공유기 내비게이션을 사용하는 데는 두 가지 방법이 있습니다. 첫 번째는 링크 구성 요소를 사용하는 것입니다. 이 구성 요소에서 to라는 매개 변수를 지정하고 언제 가져올 경로를 지정할 수 있습니다.예를 들어 to='/주제'.React는 SPA이기 때문에 우리는 사실상 URL을 납치하고 자바스크립트로 교체할 구성 요소를 확정합니다. 내비게이션이 전혀 없습니다. (응용 프로그램 전체를 다시 보여주지 않습니다.)또 다른 방법은 도구다.역사푸시 ("/주제")
장소
⬇️
경로 이름
그것은 우리에게 응용 프로그램의 위치를 알려 준다.따라서 만약에 우리가 내비게이션을 하면: http://localhost:3000/topics/15/something/props 이 URL은 바로 경로 이름이 되돌아오는 내용입니다.이것은 매우 유용하다. 왜냐하면 우리의 구성 요소는 완전한 URL의 모습을 알고 있기 때문이다.

중첩된 라우팅

TopicsList 구성 요소와 Topic 구성 요소를 프로젝트에 추가하는 플러그인 예시를 신속하게 만듭니다.
이것은 TopicsList 구성 요소의 코드입니다.

import React from 'react';
import { Link } from 'react-router-dom'

const TopicsList = (props) => {

  React.useEffect(() => {
    console.log(props.match.url);
  }, []);

  return(
    <div>
      <h1>Topics List Page</h1>
      <Link to={`${props.match.url}/A`} >To topic A</Link><br/>
      <Link to={`${props.match.url}/B`} >To topic B</Link><br/>
      <Link to={`${props.match.url}/C`} >To topic C</Link><br/>
    </div>
  )
}

export default TopicsList;

보시다시피 TopicsList 구성 요소에서 링크를 사용합니다."to"매개 변수는 문자열 템플릿으로 만들어졌기 때문에 우리는 우리의 도구를 사용할 수 있습니다.성냥url+우리가 보고 싶은 주제.도구.성냥이 때 URL은 "/topics"입니다. 이것은 TopicsList 구성 요소를 보여주는 경로를 지정하기 때문입니다. 만약에 컨트롤러를 사용한다면 이 점을 볼 수 있습니다.이 값을 기록합니다.
그리고 저희가 볼 주제를 정하도록 하겠습니다.

이것은 우리 테마 구성 요소의 코드입니다.

import React from 'react';

const Topic = (props) => {

  React.useEffect(() => {
    console.log(props);
  }, []);

  return(
    <div>
      <h1>Topic {props.match.params.topicId}</h1>
    </div>
  )
}

export default Topic;

테마 구성 요소에서 도구를 사용하고 있습니다.성냥매개 변수.topicId는 어떤 테마를 렌더링해야 하는지 알고 싶어서 같은 구성 요소를 사용하여 모든 테마를 렌더링합니다. 내용을 변경하고 매개 변수에서 얻을 수 있습니다.

지금 우리는 우리의 응용 프로그램을 업데이트하기만 하면 된다.js, 코드는 다음과 같습니다.

import React from 'react';
import { 
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'
import './App.css';

import Home from './components/home/home.component';
import TopicsList from './components/topicsList/topicsList.component';
import Topic from './components/topic/topic.component';

function App() {
  return (
    <Router>
      <div>
        <Link to="/">Home</Link><br/>
        <Link to="/topics">TopicsList</Link><br/>
      </div>
      <Route exact path='/' component={Home}/>
      <Route exact path='/topics' component={TopicsList}/>
      <Route exact path='/topics/:topicId' component={Topic}/>
    </Router>
  );
}

export default App;

주제 구성 요소 라우팅에 주의하십시오.

<Route exact path='/topics/:topicId' component={Topic}/>

/topics/다음에 사용: topicId, 우리가 이전에 표에서 말한 바와 같이, 이것은 그 다음에 url을 동적으로 변경하고 매개 변수로 전달할 수 있음을 의미한다.
변경 사항을 저장하고 응용 프로그램을 테스트합시다.

보시다시피 모든 것이 예상대로 작동하고 있습니다. 이제 모든 것이 어떻게 협동적으로 작동하는지, 루트와 연결 구성 요소로 렌더링된 구성 요소에 전달되는 도구를 어떻게 사용하는지 알게 되었습니다.
나는 네가 이 글을 좋아하고 그것이 매우 유용하다는 것을 발견하기를 바란다. 만약 네가 좋아한다면, 마음대로 나누고, 만약 네가 이 글에 대해 어떤 생각이 있다면, 언제든지 이곳에서 평론을 발표하거나 나에게 연락해라. 어떤 피드백도 감격해 마지 않을 것이다.
좋은 하루 되세요!✌️