React Router v4 – Erste Schritte

In diesem Artikel wird hauptsächlich der React Router v4-Einstiegsleitfaden (Zusammenfassung) vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor, um einen Blick darauf zu werfen

Es ist drei Monate her, seit React Router v4 offiziell veröffentlicht wurde. Diese Woche wurde ein React-Shelf aktualisiert. Das vorherige Routing verwendete noch Version v2.7.0, also habe ich mich entschieden um auch das Routing zu aktualisieren, einfach um „etwas Neues auszuprobieren“...

Es gibt Gerüchte auf der Welt, dass der Beamte beide Versionen 2.x und 4.x gleichzeitig verwaltet. (ヾ(｡ꏿ﹏ꏿ)ﾉﾞHey, in diesem Moment glaube ich, dass Sie, der so schlau ist wie ich, auch herausfinden werden, wo ReactRouter v3 geblieben ist? Alles verloren?? Bala hat keine Probleme mehr??? Wagen Sie es, mir eine perfekte Erklärung zu geben?) Tatsächlich führt Version 3.x im Vergleich zu Version 2.x keine neuen Funktionen ein, sondern entfernt lediglich die Warnungen einiger veralteter APIs in Version 2.x. Wenn neue Projekte ohne historischen Ballast die stabile Version von ReactRouter verwenden möchten, sollten sie laut Plan ReactRouter 3.x verwenden. Die 3.x-Version befindet sich derzeit noch im Beta-Stadium, wird aber vor der 4.x-Version offiziell veröffentlicht. Wenn Sie bereits Version 2.x verwenden, sind für das Upgrade auf 3.x keine zusätzlichen Codeänderungen erforderlich.

Eine höfliche Einführung

React Router V4 hat grundlegende Änderungen im Vergleich zu den vorherigen drei Versionen.Nur ​​Komponentes API-Designkonzept, und zweitens wurde die API auch stark optimiert, was die Lernschwierigkeit für Anfänger verringert, aber wenn es sich um eine Rekonstruktion des vorherigen Projekts handelt, gibt es nichts zu tun sagen. Die Hauptmerkmale dieses Upgrades sind wie folgt:

• Deklarativ

• Zusammensetzbarkeit

React Router V4 folgt der React-Philosophie: Alles ist eine Komponente. Daher handelt es sich bei der aktualisierten Route, dem Link, dem Switch usw. um gemeinsame Komponenten.

React Router V4 verwaltet mehrere Repositories basierend auf Lerna. In dieser Codebasis enthalten:

1. react-router React Router core

2. react-router-dom React Router für DOM-Bindung

3. react-router-native React Router für React Native

4. react-router-redux Integration von React Router und Redux

5. React-Router-Config-Assistent für die statische Routing-Konfiguration

Erste Einführung des Plug-Ins

Normalerweise verwenden wir React Im Einsatz, Im Allgemeinen werden zwei Pakete eingeführt: react und react-dom. Müssen also sowohl react-router als auch react-router-dom referenziert werden? Achtung, es liegt viel Energie vor uns und die erste Grube zum Starten ist genau hier . Sie müssen nur auf eine davon verweisen. Der Unterschied besteht darin, dass letztere mehr DOM-Komponenten wie 52a25b17b52424c09a9e188108722f11 6177ae8eed0322e277a7e6c21878d6d7 hat als erstere. Wir müssen also nur auf das react-router-dom-Paket verweisen und fertig. In Kombination mit redux müssen Sie natürlich auch react-router-redux verwenden.

Einführung in die Hauptkomponenten

In der API-Version vor 4.0 können die untergeordneten Elemente der a7f2cf15f06fbef780c6b2609731da81-Komponente nur verschiedene von React Router bereitgestellte Komponenten sein, z. B. f1752bb1b5753d208371fbe2bc37516a、6fa8d15dc243beab39bb4f4079053772、8a5440a00d77d6842e44278244fc3a30 warte. In React Router 4 können Sie verschiedene Komponenten und Tags in die a7f2cf15f06fbef780c6b2609731da81-Komponente einfügen, und ihre Rolle ähnelt eher 97c08e022d0743df1dbe093233ea8aa7 in Redux. **Der Unterschied besteht darin, dass 97c08e022d0743df1dbe093233ea8aa7 verwendet wird, um mit dem Geschäft auf dem Laufenden zu bleiben, während a7f2cf15f06fbef780c6b2609731da81 verwendet wird, um mit dem Standort synchronisiert zu bleiben. **Beispiele sind wie folgt:

// 示例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 ist die zugrunde liegende Schnittstelle, die von allen Routing-Komponenten gemeinsam genutzt wird. Im Allgemeinen verwenden unsere Anwendungen nicht diese Schnittstelle, sondern erweiterte Routing:

1. 6177ae8eed0322e277a7e6c21878d6d7: Verwenden Sie die von HTML5 bereitgestellte Verlaufs-API, um die Benutzeroberfläche und die URL synchron zu halten.

2. 4915f05e1fd45774514682b289f54a27: Verwenden Sie der URL-Hash (zum Beispiel: window.location.hash), um die Benutzeroberfläche und die URL synchron zu halten

3. ab736354b76d127562077b87d19fcb68: kann den Verlauf Ihrer „URL“ im Speicher speichern (dort). ist keine Synchronisierung des Lesens und Schreibens der Adressleiste);

4. 5045a35d6d66252713cf484dccb46c37: Bietet Routing-Unterstützung für die Verwendung von React Native; : Ändert nie die Adresse;

5. TIPPS: Im Gegensatz zum vorherigen Router ist nur ein untergeordnetes Element unter der 918422798e26d25f6fed3e9f4a3226eb-Komponente zulässig wird gemeldet.

Das Negativbeispiel ist hier:

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>

Ja, Beispiel 2 meldet die folgende Ausnahmemeldung ohne den Schutz von

Papa. :

我们知道，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

Das obige ist der detaillierte Inhalt vonReact Router v4 – Erste Schritte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!