React Router 사용

먼저 샘플을 제작하는 프로젝트.

create-react-app router

위 명령을 실행한 지 얼마 되지 않아 다음 로그가 표시됩니다.

Success! Created router at /Users/sh0/Documents/git_repo/examples/react/modern/router
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd router
  yarn start

그런 다음 React Router를 설치합니다.

npm install --save react-router-dom

다른 포장이 부족한 물건도 있으니 먼저 만들어라npm install.

npm install

일단 설치가 끝나면 시험해 보십시오

yarn start

그리고 브라우저가 일어날지 확인하십시오.

원형에 파일을 추가합니다.
리액트 로터의 간단한 샘플입니다.
src/RouterExample.js

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

const RouterApp = () => (
  <Router>
    <div style={{margin: 20}}>
      <Route exact path='/' component={Home} />
      <Route path='/easy' component={EasyCourse} />
      <Route path='/normal' component={NormalCourse} />
      <Route path='/hard' component={HardCourse} />
    </div>
  </Router>
)

const Home = () => (
  <div>
    <h1>React Router Lesson</h1>
    <p>コースを選択してください。</p>
    <ul>
      <li><a href='easy'>Easy</a></li>
      <li><a href='normal'>Normal</a></li>
      <li><a href='hard'>Hard</a></li>
    </ul>
  </div>
)

const EasyCourse = () => (
  <div>
    <h1>Easy Course</h1>
    <p><a href="/">Back</a></p>
  </div>
)

const NormalCourse = () => (
  <div>
    <h1>Normal Course</h1>
    <p><a href="/">Back</a></p>
  </div>
)

const HardCourse = () => (
  <div>
    <h1>Hard Course</h1>
    <p><a href="/">Back</a></p>
  </div>
)

export default RouterApp

그리고 편집public/index.html.
보충<div id="routerExample"></div>만 하면 됩니다.
public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <div id="routerExample"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

그런 다음 변경 사항을 src/index.js에 추가하여 RouterApp 구성 요소를 표시합니다.
src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import RouterApp from './RouterExample'
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<RouterApp />, document.getElementById('routerExample'));
registerServiceWorker();

브라우저에 변경 사항이 자동으로 반영되었을 것입니다. 확인하십시오.
다음 페이지 변환을 설정할 수 있습니다:.

Reference

이 문제에 관하여(React Router 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sho7/items/aa0f389d0c9de5ff95dc

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

React Router 사용

Reference

좋은 웹페이지 즐겨찾기