집 > 기사 > 웹 프론트엔드 > React 라우팅 관리 React Router 사용 단계 상세

React 라우팅 관리 React Router 사용 단계 상세

php中世界最好的语言원래의: 2018-05-22 11:17:122224검색

이번에는 React Routing Management에서 React Router를 사용하는 단계에 대해 자세히 설명하겠습니다. React Routing Management에서 React Router를 사용할 때 주의사항은 무엇인가요?

React 프로젝트에는 일반적으로 관리해야 할 URL이 많습니다. 가장 일반적으로 사용되는 솔루션은 React Router입니다. 최근에는 주로 공식 영어 문서를 읽고 나중에 참고할 수 있도록 요약했습니다.

React Router의 기능은 무엇인가요? 공식 소개는 다음과 같습니다.

UI를 URL과 동기화하는 완전한 라우팅 라이브러리입니다. 지연 코드 로딩, 동적 경로 일치 등의 강력한 기능을 갖춘 간단한 API가 있습니다. 위치 전환 처리 기능이 내장되어 있습니다. URL을 나중에 생각하지 말고 먼저 생각하십시오.

주요 아이디어는 UI 구성 요소와 URL을 동기화하고 간단한 API 로딩, 동적을 통해 지연 코드와 같은 강력한 기능을 달성하는 것입니다. 경로 매칭, 경로 전환 처리 등

React Router의 몇 가지 사용법은 다음과 같습니다.

1 Simple Rendering Route

한 가지 명심해야 할 점은 Router는 렌더링할 수 있는 React 구성 요소라는 것입니다.

// ...
import { Router, Route, hashHistory } from 'react-router'
render((
 <Router history={hashHistory}>
  <Route path="/" component={App}/>
 </Router>
), document.getElementById('app'))

hashHistory가 여기에서 사용됩니다. 라우팅 기록과 URL의 해시 부분을 관리합니다.

더 많은 경로를 추가하고 해당 구성 요소를 지정합니다.

import About from './modules/About'
import Repos from './modules/Repos'
render((
 <Router history={hashHistory}>
  <Route path="/" component={App}/>
  <Route path="/repos" component={Repos}/>
  <Route path="/about" component={About}/>
 </Router>
), document.getElementById('app'))

two Link

// modules/App.js
import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
 render() {
  return (
   <p>
    <h1>React Router Tutorial</h1>
    <ul role="nav">
     <li><Link to="/about">About</Link></li>
     <li><Link to="/repos">Repos</Link></li>
    </ul>
   </p>
  )
 }
})

Link 구성 요소는 여기서 링크를 렌더링하고 to 속성을 사용하여 해당 경로를 가리킬 수 있는 데 사용됩니다.

3개의 중첩 경로

내비게이션 바를 추가하려면 모든 페이지에 네비게이션 바가 있어야 합니다. 라우터가 없는 경우 각 탐색 구성 요소를 캡슐화하고 이를 각 페이지 구성 요소에서 참조하고 렌더링해야 합니다. 애플리케이션이 커지면 코드가 중복됩니다. React-router는 공유 UI 구성 요소를 중첩하는 또 다른 방법을 제공합니다.

실제로 우리 앱은 일련의 중첩 상자이며 해당 URL도 이 중첩 관계를 설명할 수 있습니다.

<App>    {/* url /     */}
 <Repos>  {/* url /repos   */}
  <Repo/> {/* url /repos/123 */}
 </Repos>
</App>

따라서 하위 구성 요소 를 공용 구성 요소에 중첩하여 앱을 만들 수 있습니다. 구성 요소의 탐색 모음 Nav를 공유할 수 있습니다.

// index.js
// ...
render((
 <Router history={hashHistory}>
  <Route path="/" component={App}>
   {/* 注意这里把两个子组件放在Route里嵌套在了App的Route里/}
   <Route path="/repos" component={Repos}/>
   <Route path="/about" component={About}/>
  </Route>
 </Router>
), document.getElementById('app'))

다음으로 앱에서 하위 항목을 렌더링합니다.

// modules/App.js
// ...
 render() {
  return (
   <p>
    <h1>React Router Tutorial</h1>
    <ul role="nav">
     <li><Link to="/about">About</Link></li>
     <li><Link to="/repos">Repos</Link></li>
    </ul>
    {/* 注意这里将子组件渲染出来 */}
    {this.props.children}
   </p>
  )
 }
// ...

4개의 유효한 링크

Link 구성 요소와 a 태그의 차이점 중 하나는 다음과 같습니다. 링크는 자신이 가리키는 경로가 유효한 경로인지 여부를 알 수 있습니다.

<li><Link to="/about" activeStyle={{ color: &#39;red&#39; }}>About</Link></li>
<li><Link to="/repos" activeStyle={{ color: &#39;red&#39; }}>Repos</Link></li>

activeStyle을 사용하여 효과적인 링크의 스타일을 지정하거나 activeClassName을 사용하여 효과적인 링크의 스타일 클래스를 지정할 수 있습니다.

대부분의 경우 링크가 유효한지 알 필요가 없지만 이 기능은 탐색에 매우 중요합니다. 예를 들어 탐색 표시줄에 합법적인 라우팅 링크만 표시할 수 있습니다.

// modules/NavLink.js
import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
 render() {
  return <Link {...this.props} activeClassName="active"/>
 }
})

// modules/App.js
import NavLink from './NavLink'
// ...
<li><NavLink to="/about">About</NavLink></li>
<li><NavLink to="/repos">Repos</NavLink></li>

NavLink에서 .active 링크만 표시되도록 지정할 수 있습니다. 그러면 경로가 유효하지 않은 경우 링크가 탐색 모음에 표시되지 않습니다.

5개의 URL 매개변수

다음 URL을 고려하세요:

/repos/reactjs/react-router

/repos/facebook/react

다음 형식에 해당할 수 있습니다:

/repos/: userName/ :repoName

: 변수 매개변수

URL의

변수 매개변수는 this.props.params[paramsName]:

// modules/Repo.js
import React from 'react'
export default React.createClass({
 render() {
  return (
   <p>
{/* 注意这里通过this.props.params.repoName 获取到url中的repoName参数的值 */}
    <h2>{this.props.params.repoName}</h2>
   </p>
  )
 }
})

// index.js
// ...
// import Repo
import Repo from './modules/Repo'
render((
 <Router history={hashHistory}>
  <Route path="/" component={App}>
   <Route path="/repos" component={Repos}/>
   {/* 注意这里的路径 带了 ：参数 */}
   <Route path="/repos/:userName/:repoName" component={Repo}/>
   <Route path="/about" component={About}/>
  </Route>
 </Router>
), document.getElementById('app'))

를 통해 얻을 수 있습니다. 다음으로 /repos/reactjs/react-router 및 /repos/facebook을 방문하세요. /반응 다양한 내용을 보실 수 있습니다.

Six Default Route

// index.js
import { Router, Route, hashHistory, IndexRoute } from 'react-router'
// and the Home component
import Home from './modules/Home'
// ...
render((
 <Router history={hashHistory}>
  <Route path="/" component={App}>
   {/* 注意这里* /}
   <IndexRoute component={Home}/>
   <Route path="/repos" component={Repos}>
    <Route path="/repos/:userName/:repoName" component={Repo}/>
   </Route>
   <Route path="/about" component={About}/>
  </Route>
 </Router>
), document.getElementById('app'))

IndexRoute가 여기에 추가되어 기본 경로/해당 구성 요소를 지정합니다. 경로 속성 값이 없다는 점에 유의하세요.

마찬가지로 기본 링크 구성 요소인 IndexLink도 있습니다. ,

브라우저 기록을 사용하는 7가지

이전 예제에서는 항상 실행될 수 있기 때문에 항상 hashHistory를 사용했지만 더 좋은 방법은 해시 포트(#)에 의존하지 않는 브라우저 기록을 사용하는 것입니다.

首先需要改 index.js:

// ...
// bring in `browserHistory` instead of `hashHistory`
import { Router, Route, browserHistory, IndexRoute } from 'react-router'
render((
{/* 注意这里 */}
 <Router history={browserHistory}>
  {/* ... */}
 </Router>
), document.getElementById('app'))

其次需要修改webpack的本地服务配置，打开 package.json 添加 –history-api-fallback ：

复制代码代码如下:

"start": "webpack-dev-server --inline --content-base . --history-api-fallback"

最后需要在 index.html中将文件的路径改为相对路径：

<!-- index.html -->
<!-- index.css 改为 /index.css -->
<link rel="stylesheet" href="/index.css" rel="external nofollow" >
<!-- bundle.js 改为 /bundle.js -->
<script src="/bundle.js"></script>

这样就去掉了url中的 # 。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

React 라우팅 관리 React Router 사용 단계 상세

관련 기사