React 라우터를 사용하여 React 애플리케이션의 사용자 환경을 개선하는 방법

이 안내서에서 사용자 정의 404 페이지를 만들고 사용자가 잘못된 페이지에 들어갈 때react router를 사용하여 사용자 정의 404 페이지로 이동합니다.react router를 사용하여react 프로그램의 페이지 루트를 관리할 때의 요점을 간략하게 소개합니다.
필요한 사항:

반응 공유기(installation link here)

React 애플리케이션

사용자 지정 404페이지

반응 라우터 요소:
React Router는 React에서 라우팅하는 표준 라이브러리입니다.React 응용 프로그램의 다양한 구성 요소 보기 사이를 탐색할 수 있으며 브라우저 URL을 변경할 수 있으며 UI와 URL을 동기화할 수 있습니다 source
우리의 구체적인 사례에서 고려해야 할 주요 구성 부분은 다음과 같다.
Browser Router: HTML5 역사 API (push State, replace State,popstate 이벤트) 를 사용하여 사용자 인터페이스와 URL을 동기화합니다.이것은 다른 모든 구성 요소를 저장하는 데 사용되는 부모 구성 요소입니다.
라우트: 경로가 현재 URL과 일치할 때 일부 UI를 렌더링하는 것이 가장 기본적인 역할입니다.
스위치: 스위치 어셈블리는 위치와 일치하는 첫 번째 파이프라인만 렌더링하는 데 사용되며 모든 일치하는 파이프라인은 렌더링하지 않습니다.(Google은 가이드에서 그것을 사용하여 우리의 맞춤형 404를 보여 드리겠습니다.)
링크: 링크 구성 요소는 여러 노선을 가리키는 링크를 만들고 응용 프로그램에서 내비게이션을 실현하는 데 사용됩니다.
설정
우선, 우리는 create-react-app 명령이나 codesandbox 또는 codepen 같은 환경과 React 템플릿을 사용하여 새로운 React 프로그램을 만들어야 한다.
명령npm install react-router-dom을 실행하여react router를 설치하거나 codesandbox 또는 codepen.의 의존항으로 추가하기
폴더 구조는 현재 src 폴더에 페이지 디렉터리가 있습니다. 이 안내서에 필요한 모든 페이지를 포함합니다.홈 페이지, 정보, 대시보드, 도움말, 사용자 정의 404페이지가 네 개 있습니다.내비게이션 구성 요소가 있는 구성 요소 폴더가 하나 더 있습니다.

우리 프로그램에서js 파일react 공유기에서 필요한 모든 모듈 가져오기

import { BrowserRouter as Router, Route } from "react-router-dom";

그리고 특정한 페이지와 구성 요소를 가져옵니다

//pages
import Home from "./pages/Home";
import About from "./pages/About";
import Help from "./pages/Help";
import Dashboard from "./pages/Dashboard";
//components
import Nav from "./Components/Nav";

모든 내용을 가져온 후, 프로그램은react router에서 제공하는 기능을 사용하도록 설정합니다.라우터 구성 요소에 모든 컨텐트를 포장한 다음 렌더링할 탐색 구성 요소를 가져옵니다.

export default function App() {
return (
   <Router>
         <Nav />
         <hr />
   </Router>
  );
}

이후에, 우리는 각종 루트 구성 요소를 사용하여 페이지의 루트를 설정하는데, 이 구성 요소들은 우리가 필요한 페이지에 도착하도록 인도할 것이다

export default function App() {
return (
   <Router>
      <Nav />
        <hr />
         <Route exact path="/">
           <Home />
         </Route> 
         <Route path="/about">
           <About />
         </Route>
         <Route path="/help"><Help />
           </Route>
         <Route path="/dashboard">
           <Dashboard />
         </Route>
    </Router>
  );
}

우리의 응용.모든 설정이 정확할 때 js 파일은 다음과 같습니다

import "./styles.css";
import { BrowserRouter as Router, Route } from "react-router-dom";

//pages
import Home from "./pages/Home";
import About from "./pages/About";
import Help from "./pages/Help";
import Dashboard from "./pages/Dashboard";

//components
import Nav from "./Components/Nav";

export default function App() {
  return (
    <Router>
      <Nav />
      <hr />
      <Route exact path="/">
        <Home />
      </Route>
      <Route path="/about">
        <About />
      </Route>
      <Route path="/help">
        <Help />
      </Route>
      <Route path="/dashboard">
        <Dashboard />
      </Route>
    </Router>
  );
}

프로젝트 장면:
예를 들어 우리는fintech 초창기 회사 내부에서 일회성 보너스를 받았고 모든 새로운 사용자에게 두 배의 초기 투자를 제공했다.이번 홍보는 하룻밤만 지속되었는데, 그 홍보가 끝난 후, 우리는 개발팀으로서 그 특정한 홍보 페이지를 삭제하기로 결정했다. 
나중에 페이지에 온 모든 사람들이 공백 페이지만 보았는데, 이것은 나쁜 사용자 체험이었다.우리는 어떻게 이 문제를 해결합니까?
솔루션은 맞춤형 404 페이지입니다.
맞춤형 404페이지는 사용자가 원하는 페이지로 이동하는 데 이상적인 해결 방안이며, 이 예는 홈 페이지입니다.
이러한 특수한 상황에 대해, 우리는react 공유기에서 제공하는 <Switch> 구성 요소를 사용할 것이다. 
앞에서 말한 바와 같이, 우리는 switch 구성 요소를 사용하여 지정한 위치와 일치하는 첫 번째 루트만 렌더링합니다.이 점을 감안하여, 우리는 switch 구성 요소를 사용하여 필요한 페이지와 일치하는 첫 번째 정확한 경로를 보여 드리겠습니다. 
경로가 일치하지 않을 때마다 렌더링할 수 있도록 특수 경로를 추가"*" 도구에 전달합니다.이 루트 구성 요소에서 사용자 정의 404 페이지를 추가합니다. 프로그램이 잘못된 페이지를 입력할 때마다 이 페이지를 보여 줍니다.

export default function App() {
  return (
    <Router>
      <Nav />
      <hr />
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/help">
          <Help />
        </Route>
        <Route path="/dashboard">
          <Dashboard />
        </Route>
        <Route path="*">
          <NotFound />
        </Route>
      </Switch>
    </Router>
  );
}

이렇게 해서 우리는 현재 응용 프로그램의 전체적인 사용자 체험을 개선했다.프로그램 이외의 모든 페이지에 들어갈 때 사용자 정의 오류 페이지로 돌아가 홈 페이지로 안내합니다.

이 안내서Here의 코드를 찾을 수 있습니다.
여기까지 와줘서 고마워요,너무 기뻐요!!!