찾다

집  >  기사  >  웹 프론트엔드  >  React Router v4 시작 가이드

React Router v4 시작 가이드

亚连
亚连원래의
2018-05-26 13:36:341311검색

이 글은 주로 React Router v4 입문 가이드(요약)를 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려보겠습니다. 에디터를 따라가서 살펴볼까요

React Router v4가 공식적으로 출시된 지 3개월이 지났습니다. 이번 주에 React 쉘프를 업그레이드했습니다. 이전 라우팅은 여전히 ​​v2.7.0 버전을 사용하고 있었기 때문에 라우팅도 변경되었습니다. "새로운 것을 시도"할 시간에 맞춰 업그레이드되었습니다...

공식에서 2.x와 4.x의 두 가지 버전을 동시에 유지한다는 소문이 있습니다. (ヾ(｡ꏿ﹏ꏿ)ﾉﾞ야 지금 이 순간 저처럼 똑똑한 여러분도 알게 되실 거라 믿습니다. ReactRouter v3는 어디로 갔나요? 다 잃어버렸나요?? Bala는 문제가 없습니다??? 감히 완벽한 것을 알려주시겠습니까?) 사실 버전 3.x는 버전 2.x에 비해 새로운 기능을 도입하지 않았으며 버전 2.x에서 사용되지 않는 일부 API에 대한 경고를 제거했을 뿐입니다. 계획에 따르면, 역사적인 수하물이 없는 새로운 프로젝트가 ReactRouter의 안정적인 버전을 사용하려면 ReactRouter 3.x를 사용해야 합니다. 3.x 버전은 현재 베타 단계이지만 4.x 버전 이전에 공식적으로 출시될 예정입니다. 이미 버전 2.x를 사용하고 있는 경우 3.x로 업그레이드해도 추가 코드 변경이 필요하지 않습니다.

정중한 소개

React Router V4는 이전 세 가지 버전에 비해 근본적인 변화가 있습니다. 우선 Just Component라는 API 디자인 개념을 따릅니다. 둘째, API도 많이 간소화되었습니다. .. 초보자의 학습 난이도를 줄여주지만, 이전 프로젝트를 재구성한 것이라면 뭐 말할 것도 없습니다. 이번 업그레이드의 주요 기능은 다음과 같습니다:

  • 선언적

  • 합성성

React Router V4는 모든 것이 구성 요소입니다라는 React 철학을 따릅니다. 따라서 업그레이드된 Route, Link, Switch 등은 모두 공통구성요소입니다.

React Router V4는 Lerna를 기반으로 여러 저장소를 관리합니다. 이 코드 베이스에 포함된 내용:

  1. react-router React Router 코어

  2. react-router-dom DOM 바인딩용 React Router

  3. react-router-native React Native용 React Router

  4. react- router-redux React Router와 Redux의 통합

  5. react-router-config 정적 라우팅 구성 도우미

플러그인 최초 소개

보통 React를 사용할 때 도입해야 하는 것이 일반적입니다. 둘 패키지, react 및 react-dom, react-router 및 react-router-dom은 그렇지 않습니다. 둘 다 인용해? react 和  react-dom ，那么 react-router 和 react-router-dom 是不是两个都要引用呢？ 注意，前方高能，入门第一坑就在这里 。他们两个只要引用一个就行了，不同之处就是后者比前者多出了 52a25b17b52424c09a9e188108722f11 6177ae8eed0322e277a7e6c21878d6d7 这样的 DOM 类组件。因此我们只需引用 react-router-dom 这个包就OK了。当然，如果搭配 redux ，你还需要使用 react-router-redux 。

主要组件简介

在4.0之前版本的 API 中， a7f2cf15f06fbef780c6b2609731da81 组件的 children 只能是 React Router 提供的各种组件，如 f1752bb1b5753d208371fbe2bc37516a、6fa8d15dc243beab39bb4f4079053772、8a5440a00d77d6842e44278244fc3a30 等。而在 React Router 4 中，你可以将各种组件及标签放进 a7f2cf15f06fbef780c6b2609731da81 组件中，他的角色也更像是 Redux 中的 97c08e022d0743df1dbe093233ea8aa7 。**不同的是 97c08e022d0743df1dbe093233ea8aa7 是用来保持与 store 的更新，而 a7f2cf15f06fbef780c6b2609731da81 是用来保持与 location 的同步。**示例如下：

// 示例1
<Router>
 <p>
  <ul>
  <li><Link to="/">首页</Link></li>
  <li><Link to="/about">关于</Link></li>
  <li><Link to="/topics">主题列表</Link></li>
  </ul>

  <hr/>

  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/topics" component={Topics}/>
 </p>
 </Router>

Router是所有路由组件共用的底层接口，一般我们的应用并不会使用这个接口，而是使用高级的路由：

  1. 6177ae8eed0322e277a7e6c21878d6d7 ：使用 HTML5 提供的 history API 来保持 UI 和 URL 的同步；

  2. 4915f05e1fd45774514682b289f54a27 ：使用 URL 的 hash (例如：window.location.hash) 来保持 UI 和 URL 的同步；

  3. ab736354b76d127562077b87d19fcb68 ：能在内存保存你 “URL” 的历史纪录(并没有对地址栏读写)；

  4. 5045a35d6d66252713cf484dccb46c37 ：为使用React Native提供路由支持；

  5. 918422798e26d25f6fed3e9f4a3226eb ：从不会改变地址；

TIPS：算是第二坑吧，和之前的Router不一样，这里 a7f2cf15f06fbef780c6b2609731da81 组件下只允许存在一个子元素，如存在多个则会报错。

反面典型在这里：

<Router>
  <ul>
  <li><Link to="/">首页</Link></li>
  <li><Link to="/about">关于</Link></li>
  <li><Link to="/topics">主题列表</Link></li>
  </ul>

  <hr/>

  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/topics" component={Topics}/>
 </Router>

没错，示例2在没有 e388a4556c0f65e1904146cc1a846bee주의하세요, 앞에는 높은 에너지가 있고 시작하기 위한 첫 번째 구덩이는 바로 여기입니다

. 그 중 하나만 참조하면 됩니다. 차이점은 후자가 전자보다 52a25b17b52424c09a9e188108722f116177ae8eed0322e277a7e6c21878d6d7와 같은 DOM 클래스 구성 요소를 더 많이 가지고 있다는 것입니다. 따라서 react-router-dom 패키지만 참조하면 됩니다. 물론 redux와 짝을 이루면 react-router-redux도 사용해야 합니다. 🎜🎜🎜주요 구성 요소 소개🎜🎜🎜4.0 이전 API 버전에서 a7f2cf15f06fbef780c6b2609731da81 구성 요소의 하위 구성 요소는 <Route&gt와 같이 React Router에서 제공하는 다양한 구성 요소만 될 수 있습니다. ; , 6fa8d15dc243beab39bb4f4079053772, 8a5440a00d77d6842e44278244fc3a30 등 React Router 4에서는 다양한 구성 요소와 태그를 <router></router> 구성 요소에 넣을 수 있으며 그 역할은 Redux 코드>의 <provider></provider>와 비슷합니다. . **차이점은 97c08e022d0743df1dbe093233ea8aa7는 매장 업데이트를 유지하는 데 사용되고 a7f2cf15f06fbef780c6b2609731da81는 위치 동기화를 유지하는 데 사용된다는 것입니다. **예는 다음과 같습니다. 🎜

🎜

<Router>
 <p>
 <Route exact path="/" component={Home}/>
 <Route path="/news" component={NewsFeed}/>
 </p>
</Router>

// 如果应用的地址是/,那么相应的UI会类似这个样子：
<p>
 <Home/>
</p>

// 如果应用的地址是/news,那么相应的UI就会成为这个样子：
<p>
 <NewsFeed/>
</p>
🎜🎜🎜Router는 모든 라우팅 구성 요소가 공유하는 기본 인터페이스입니다. 일반적으로 우리 애플리케이션은 이 인터페이스를 사용하지 않지만 고급 라우팅을 사용합니다. 🎜🎜 🎜 🎜6177ae8eed0322e277a7e6c21878d6d7: HTML5에서 제공하는 기록 API를 사용하여 UI와 URL을 동기화합니다. 🎜🎜🎜🎜4915f05e1fd45774514682b289f54a27: UI와 URL의 동기화를 유지하기 위한 URL(예: window.location.hash) 🎜🎜🎜🎜ab736354b76d127562077b87d19fcb68: "URL" 기록을 메모리에 저장할 수 있습니다(읽거나 읽지 않고). 주소 표시줄 쓰기) ;🎜🎜🎜🎜5045a35d6d66252713cf484dccb46c37 : React Native 사용을 위한 라우팅 지원 제공 🎜🎜🎜🎜918422798e26d25f6fed3e9f4a3226eb : 주소를 변경하지 않습니다. ; 🎜🎜🎜 🎜팁: 이전 라우터와 달리 a7f2cf15f06fbef780c6b2609731da81 구성 요소에는 하위 요소가 하나만 허용됩니다. 보고되었습니다. 🎜🎜부정적인 예는 다음과 같습니다. 🎜

🎜

// 行内渲染示例
<Route path="/home" render={() => <p>Home</p>}/>

// 包装/合成
const FadingRoute = ({ component: Component, ...rest }) => (
 <Route {...rest} render={props => (
 <FadeIn>
  <Component {...props}/>
 </FadeIn>
 )}/>
)

<FadingRoute path="/cool" component={Something}/>
🎜🎜🎜예, 예 2에서는 e388a4556c0f65e1904146cc1a846bee 아빠의 보호 없이 다음과 같은 예외 메시지를 보고합니다. 🎜

我们知道，Route组件主要的作用就是当一个location匹配路由的path时，渲染某些UI。示例如下：

<Router>
 <p>
 <Route exact path="/" component={Home}/>
 <Route path="/news" component={NewsFeed}/>
 </p>
</Router>

// 如果应用的地址是/,那么相应的UI会类似这个样子：
<p>
 <Home/>
</p>

// 如果应用的地址是/news,那么相应的UI就会成为这个样子：
<p>
 <NewsFeed/>
</p>

f1752bb1b5753d208371fbe2bc37516a 组件有如下属性：

  1. path（string）: 路由匹配路径。（没有path属性的Route 总是会 匹配）；

  2. exact（bool）：为true时，则要求路径与location.pathname必须完全匹配；

  3. strict（bool）：true的时候，有结尾斜线的路径只能匹配有斜线的location.pathname；

再次奉上两个鲜活的例子：

exact配置：



路径 location.pathname exact 是否匹配
/one /one/two true 否
/one /one/two false 是

 strict配置：


路径 location.pathname strict 是否匹配
/one/ /one true 否
/one/ /one/ true 是
/one/ /one/two true 是

同时，新版的路由为 f1752bb1b5753d208371fbe2bc37516a 提供了三种渲染内容的方法：

  1. 135ea3ba59cf0f3cb1f3d808e28c9a39 ：在地址匹配的时候React的组件才会被渲染，route props也会随着一起被渲染；

  2. 042e5e850d8a4f46d4c8ce5a47f64889 ：这种方式对于内联渲染和包装组件却不引起意料之外的重新挂载特别方便；

  3. 267f3d31687634d3c230ef8911379a05 ：与render属性的工作方式基本一样，除了它是不管地址匹配与否都会被调用；

第一种方式没啥可说的，和之前一样，这里我们重点看下 042e5e850d8a4f46d4c8ce5a47f64889 的渲染方式：

// 行内渲染示例
<Route path="/home" render={() => <p>Home</p>}/>

// 包装/合成
const FadingRoute = ({ component: Component, ...rest }) => (
 <Route {...rest} render={props => (
 <FadeIn>
  <Component {...props}/>
 </FadeIn>
 )}/>
)

<FadingRoute path="/cool" component={Something}/>

TIPS: 第三坑！ 135ea3ba59cf0f3cb1f3d808e28c9a39 的优先级要比 042e5e850d8a4f46d4c8ce5a47f64889 高，所以不要在同一个 f1752bb1b5753d208371fbe2bc37516a 中同时使用这两个属性。

和之前版本没太大区别，重点看下组件属性：

  1. to（string/object）：要跳转的路径或地址；

  2. replace（bool）： 为 true 时 ，点击链接后将使用新地址替换掉访问历史记录里面的原地址； 为 false 时 ，点击链接后将在原有访问历史记录的基础上添加一个新的纪录。 默认为 false ；

示例如下：

// Link组件示例

// to为string
<Link to="/about">关于</Link>

// to为obj
<Link to={{
 pathname: &#39;/courses&#39;,
 search: &#39;?sort=name&#39;,
 hash: &#39;#the-hash&#39;,
 state: { fromDashboard: true }
}}/>

// replace 
<Link to="/courses" replace />

75eb454a3f4763f7cc3bc54947f512fc 是 52a25b17b52424c09a9e188108722f11 的一个特定版本, 会在匹配上当前 URL 的时候会给已经渲染的元素添加样式参数，组件属性：

  1. activeClassName（string）：设置选中样式，默认值为 active；

  2. activeStyle（object）：当元素被选中时, 为此元素添加样式；

  3. exact（bool）：为 true 时, 只有当地址完全匹配 class 和 style 才会应用；

  4. strict（bool）：为 true 时，在确定位置是否与当前 URL 匹配时，将考虑位置 pathname 后的斜线； isActive（func）：判断链接是否激活的额外逻辑的功能；

从这里我们也可以看出，新版本的路由在组件化上面确实下了不少功夫，来看看NavLink的使用示例：

// activeClassName选中时样式为selected
<NavLink
 to="/faq"
 activeClassName="selected"
>FAQs</NavLink>

// 选中时样式为activeStyle的样式设置
<NavLink
 to="/faq"
 activeStyle={{
 fontWeight: &#39;bold&#39;,
 color: &#39;red&#39;
 }}
>FAQs</NavLink>

// 当event id为奇数的时候，激活链接
const oddEvent = (match, location) => {
 if (!match) {
 return false
 }
 const eventID = parseInt(match.params.eventID)
 return !isNaN(eventID) && eventID % 2 === 1
}

<NavLink
 to="/events/123"
 isActive={oddEvent}
>Event 123</NavLink>

该组件用来渲染匹配地址的第一个 f1752bb1b5753d208371fbe2bc37516a 或者 8a5440a00d77d6842e44278244fc3a30 。那么它与使用一堆route又有什么区别呢？

da7c15ee158c884a4ad5d56e941eda87 的独特之处是独它仅仅渲染一个路由。相反地，每一个包含匹配地址(location)的 f1752bb1b5753d208371fbe2bc37516a 都会被渲染。思考下面的代码：

<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>

如果现在的URL是 /about ，那么 22d3513757c67113d267f5266c466f35 , 4c8e0c17c3bd7e0081bb17cc795e1984 , 还有 8e755732ff1d94af2a86b2f7ba06415c 都会被渲染，因为它们都与路径(path)匹配。这种设计，允许我们以多种方式将多个 f1752bb1b5753d208371fbe2bc37516a 组合到我们的应用程序中，例如侧栏(sidebars)，面包屑(breadcrumbs)，bootstrap tabs等等。 然而，偶尔我们只想选择一个 f1752bb1b5753d208371fbe2bc37516a 来渲染。如果我们现在处于 /about ，我们也不希望匹配 /:user （或者显示我们的 “404” 页面 ）。以下是使用 Switch 的方法来实现：

<Switch>
 <Route exact path="/" component={Home}/>
 <Route path="/about" component={About}/>
 <Route path="/:user" component={User}/>
 <Route component={NoMatch}/>
</Switch>

现在，如果我们处于 /about ， da7c15ee158c884a4ad5d56e941eda87 将开始寻找匹配的 f1752bb1b5753d208371fbe2bc37516a 。 c24ab0bf30485ffb3eda2a2bce62653d 将被匹配， da7c15ee158c884a4ad5d56e941eda87 将停止寻找匹配并渲染 22d3513757c67113d267f5266c466f35 。同样，如果我们处于 /michael ， 4c8e0c17c3bd7e0081bb17cc795e1984 将被渲染。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

AJAX封装类使用指南

Ajax中浏览器和服务器交互详解

AJAX初级教程之初识AJAX

위 내용은 React Router v4 시작 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：VUE를 사용하여 element-ui에서 ElTableColumn을 확장하는 방법다음 기사：VUE를 사용하여 element-ui에서 ElTableColumn을 확장하는 방법

관련 기사

더보기