React로 업그레이드:React 라우터

12667 단어 webdevreactreactnativejavascript
안녕 세상👋
이 블로그 글에서 우리는 React 공유기의 개념을 배우고 React를 이용하여 간단한 단일 페이지 응용 프로그램(SPA)을 구축할 것이다.

이 블로그의 소개 내용


- Introduction to react-router-dom
- React Router Components
- React Router Installation
- Let’s create the SPA
우리 시작합시다!

dom가 뭐예요?


루트는 모든 웹 응용 프로그램의 관건적인 부분이다.그것은 정적 HTML 페이지와 가장 복잡한 웹 응용 프로그램에서 핵심 역할을 한다.React router는 전체 페이지를 다시 로드하지 않고도 서로 다른 페이지 사이를 탐색할 수 있는 표준 라이브러리입니다.브라우저 URL과 UI(웹 페이지에 표시될 데이터)가 동기화됩니다.그것은 주로 한 페이지의 웹 응용 프로그램을 구축하는 데 사용된다.

React 라우터 라이브러리의 다른 패키지


React 라우터 라이브러리에는 세 개의 다른 라우팅 npm 패키지가 포함되어 있습니다.

  • react router는 다음에 열거한 두 패키지의 대등한 의존 항목으로 사용할 핵심 루트 라이브러리를 제공합니다.

  • react router native는 주로 React native 응용 프로그램에 사용됩니다.

  • react 공유기dom는 react 프로그램에서 루트에 사용됩니다.

    • 반응 라우터 구성 요소


    최소 탐색 시 자주 사용하는 기본 라우터 구성 요소는 Browser Router, Route, Switch 및 Link입니다.

  • 브라우저 라우터


    BrowserRouter는 HTML5 역사 API(pushState,replaceState,popstate 이벤트)를 사용하여 사용자 인터페이스와 URL을 동기화합니다.클라이언트 루트를 사용하기 위해서, React domrouter 패키지에서 Browser Router를 가져오고, 전체 응용 프로그램을 Browser Router에 포장해야 합니다.
    클라이언트 라우팅에 익숙하지 않은 경우 here에서 학습할 수 있습니다.
    • 예:
    import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
    <BrowserRouter>
      <App />
    </BrowserRouter>,
  rootElement
);

  • 스위치


    Switch 구성 요소는 경로와 일치하거나 경로가 포함된 첫 번째 경로만 렌더링합니다.
    일치하는 모든 경로를 렌더링하는 것이 아닙니다.어떤 도구도 필요 없어요.또한, 플러그인 루트가 정상적으로 작동하도록 허용하는데, 이것은 공유기가 처리할 수 없는 것이다.
    • 예:
    import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Switch } from "react-router-dom";
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
 <BrowserRouter>
       <Switch>
         <Route path="/" component={Home} />
         <Route path="/signin" component={SignIn} />
         <Route path="/signup" component={SignUp} />
       </Switch>
  </BrowserRouter>,
         rootElement
   );

  • 노선.


    라우팅은 지정된 경로를 기반으로 어셈블리를 렌더링하는 데 사용됩니다.그것은 보통 두 개의 기둥으로 정의됩니다. 경로와 구성 요소입니다.여기서 경로는 URL 라우트를 나타내고 구성 요소는 해당 경로에 표시할 페이지나 구성 요소를 나타냅니다.라우팅의 경로가/로 설정된 경우 Switch 라우팅이 일치하므로 항상 모든 경로에 표시됩니다.예를 들어 만약에 우리가 있는 경로가 /signin라면 이 경로는 확실히 /를 포함한다.역할이 포함된 경우 중첩된 라우트가 포함된 것으로 간주됩니다.
    이 문제를 해결하기 위해서, 우리는 이 노선을 위해 다른 도구, exact를 추가했다.말 그대로 경로가 같아야 한다.
    • 예.
    import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Switch } from "react-router-dom";
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
 <BrowserRouter>
         <Route exact path="/" component={Home} />
         <Route path="/signin" component={SignIn} />
         <Route path="/signup" component={SignUp} />
  </BrowserRouter>,
         rootElement
   );

  • 링크

    • 이름과 같이 이 구성 요소는 링크를 만드는 데 사용되며, 프로그램이 전체 웹 페이지를 다시 불러올 필요가 없이 다른 URL에서 그 내용을 탐색하고 표시할 수 있도록 합니다.그것은 단지 하나의 도구만 정의했다. toto는 클릭 후 방향을 변경한 위치를 나타냅니다.
    예.
    <Link to="/sample">Click to redirect</Link>

    인코딩해야 돼!


    이제 React Routing을 사용하여 간단한 워터 클리닉을 만드는 방법을 설명하겠습니다.
    먼저 React 애플리케이션을 만듭니다.
    npx create-react-app routing-app
    이 명령에 익숙하지 않으면 create-react-app getting started guide에서 더 많은 정보를 얻을 수 있습니다.
    그런 다음 react-router-dom 패키지를 설치합니다.
    npm install react-router-dom
    마지막으로 dev 서버를 시작합니다
    npm start
    그리고 가방에 의존항을 추가합니다.json.
    콘텐츠 페이지를 먼저 만들자 -
    우선 파일 홈 페이지를 만듭니다.다음을 추가합니다.
    집으로 돌아가다.js
    import React, { Component } from "react";

class Home extends Component {
  render() {
    return (
      <div>
        <h2>Welcome to Hashnode!!</h2>
        <p>
        Hashnode is the easiest way to start a developer blog on your 
        personal domain 🌏 for free and connect with the readers through 
        our global dev community! 👩‍💻👨‍💻
        </p>
      </div>
    );
  }
}

export default Home;
    다음으로signin을 만듭니다.js 파일은 같은 위치에 있습니다.
    서명하다.js
    import React, { Component } from "react";


class SignIn extends Component {
    handleClick  = ()=>
    {
            alert("Thank you for signing in 😀.");
    }

    render() {
    return (
        <>
        <div className="home">
            <h2>SignIN</h2>
            <b>Username</b><br/>
            <input type="text" placeholder="Enter username"/>
            <br/><br/>

            <b>Password</b><br/>
            <input type="password" placeholder="Enter password"/>
            <br/><br/>

            <button
            className="btn btn-success" 
            onClick={this.handleClick}>
            SignIN
            </button>
            </div>
        </>
        );
  }
}

export default SignIn;
    우리는 한 페이지만 남았다.등록을 작성합니다.src 폴더의 js 파일:
    신청하세요.js
    import React, { Component } from "react";

class SignUp extends Component {

    handleClick  = ()=>
    {
            alert("Thank you for signing in 😀.");
    }

    render() {
    return (
        <>
        <div className="home">
            <h2>SignUp</h2>
            <b>Username</b><br/>
            <input type="text" placeholder="Enter username"/>
            <br/><br/>

            <b>Enter Email</b><br/>
            <input type="email" placeholder="Enter your Email"/>
            <br/><br/>
            <b>Password</b><br/>
            <input type="password" placeholder="Enter password"/>
            <br/><br/>
            <button className="btn btn-success" 
            onClick={this.handleClick}>
            SignUp
            </button>
            </div>
        </>
        );
  }
}

export default SignUp;
    이것이 바로 우리가 웹 페이지에 전시할 모든 내용이다.모든 변경 사항을 이 세 파일에 저장해야 합니다.우리는 그것들을 어떻게 유용하게 만드는지 곧 이해할 것이다.
    응용 프로그램 개발을 시작합시다.js 파일
    우리의 응용 프로그램 프레임워크는 App 구성 요소의 형식을 채택한다.콘텐츠 페이지는 Home, SignIn 및 SignUp 구성 요소로 표시됩니다.우리가 해야 할 일은 이 모든 것을 결합시켜 우리의 응용 프로그램을 만드는 것이다.이것이 바로 React 공유기의 용무의 땅이다.사용하기 시작하려면 응용 프로그램으로 이동합니다.js 파일을 가져오고 다음 패키지를 가져옵니다.
    import React from 'react';
import {
  Route,
  Link,
  BrowserRouter
} from "react-router-dom";
import Home from './home.js';
import SignIn from './signin.js';
import SignUp from './signup.js';
    이전에 설치된react router dom npm 패키지에서 루트, 링크, Browser Router를 가져오고 있습니다.그 밖에 저희의 홈페이지, 로그인, 등록 구성 요소도 수입하고 있습니다.
    응용 프로그램.js
    import React from 'react';
import {
  Route,
  Link,
  BrowserRouter
} from "react-router-dom";
import Home from './home.js';
import SignIn from './signin.js';
import SignUp from './signup.js';

class App extends React.Component {  
render() {  
 return ( 
     <BrowserRouter> 
  <div>  
   <h1>Simple SPA</h1>  
        <ul className="header">
            <li><Link to="/">Home</Link></li>
            <li><Link to="/signin">SignIn</Link></li>
            <li><Link to="/signup">SignUp</Link></li>
          </ul>
          <div className="content">
            <Route exact path="/" component={Home}/>
            <Route exact path="/signin" component={SignIn}/>
            <Route exact path="/signup" component={SignUp}/>
          </div>
    </div>
    </BrowserRouter>
    )  
 }  
}  
export default App;
    우리가 응용 프로그램에서 사용하는 모든 기능과 수요를 설명한 바와 같다.js 파일.이해해주셨으면 좋겠습니다.궁금한 점이 있으시면 평론 부분에서 말씀해 주세요.
    CSS 추가
    현재, 우리의 응용 프로그램은 전혀 양식이 없다.src 폴더에 스타일이라는 파일을 만듭니다.css 및 다음 스타일 규칙을 추가합니다.
    body {
  background-color: #FFCC00;
  padding: 20px;
  margin: 0;
  font-size: 25px;
}
h1, h2, p, ul, li {
  font-family: sans-serif;
  text-align: center;
}
ul.header li {
  display: inline;
  list-style-type: none;
  margin: 0;
}
ul.header {
  background-color: #111;
  padding: 0;
}
ul.header li a {
  color: #FFF;
  font-weight: bold;
  text-decoration: none;
  padding: 20px;
  display: inline-block;
}
a:hover
{
    background-color: blue;
}
.content {
  background-color: #FFF;
  padding: 20px;
}
.content h2 {
  padding: 0;
  margin: 0;
}
.content li {
  margin-bottom: 10px;
}
input
{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 18px;
}
button
{
    width: 30%;
  background-color: blue;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  margin-left: 500px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
    우리 거의 끝났어!우리는 아직 해야 할 일이 몇 가지 있다.
    프로그램에서 이 스타일시트를 인용해야 합니다.색인 맨 위에 있습니다.js, import 문을 추가하면 됩니다.
    색인js
    import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
import './style.css';


ReactDOM.render(
<BrowserRouter>
  <App/>
</BrowserRouter>, 
  document.getElementById("root")
);
    모든 단계가 완료되면 웹 페이지가 다음과 같이 표시된 브라우저로 이동합니다.

    SignIn 버튼을 클릭하면 경로가 /signin로 변경되고 페이지는 응용 프로그램을 다시 로드하지 않고 SignIn 구성 요소로 이동합니다.

    마찬가지로 등록 단추를 누르면 경로가 /signup로 변경되고 페이지는 프로그램을 다시 불러올 필요가 없이 등록 구성 요소로 이동합니다.

    결론


    React router는 응용 프로그램에 큰 도움이 될 수 있는 훌륭한 도구입니다.나는 이 시연이 React 공유기에 입문 안내서를 제공하기를 바란다.
    my GitHub Repository 에서 모든 코드를 찾을 수 있습니다.만약 네가 쓸모가 있다고 생각한다면 별 하나를 던져라.
    읽어주셔서 감사합니다.❤ | 문의처
    평론 부분에서 당신의 의문을 공유합니다.

    리소스

  • https://javascript.plainenglish.io/how-to-add-react-router-to-your-react-app-bf764a776122
  • https://www.javatpoint.com/react-router
  • https://blog.logrocket.com/react-router-v6/
    • 안녕히 계세요.😃😃 !!
    POJ 1160 Post Office(dp)
    커밋 및 끌어오기 요청을 Trello 카드에 첨부하는 GitHub 작업

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage