Verwenden von React Router v4 von Grund auf

Dieses Mal werde ich Ihnen vorstellen, wie Sie React Router v4 von Grund auf verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von React Router v4 von Grund auf?

Es gibt Gerüchte, dass die offizielle Version derzeit gleichzeitig gepflegt wird, 2.x und 4.x. (ヾ(｡ꏿ﹏ꏿ)ﾉﾞ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 auf verweisen? 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 <Link> <BrowserRouter> 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 <Router>-Komponente nur verschiedene von React Router bereitgestellte Komponenten sein, z. B. <Route>、<IndexRoute>、<Redirect> warte. In React Router 4 können Sie verschiedene Komponenten und Tags in die <Router>-Komponente einfügen, und ihre Rolle ähnelt eher <Provider> in Redux. **Der Unterschied besteht darin, dass <Provider> verwendet wird, um mit dem Geschäft auf dem Laufenden zu bleiben, während <Router> verwendet wird, um mit dem Standort synchronisiert zu bleiben. **Ein Beispiel ist 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 erweitertes Routing:

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

2. <HashRouter>: Verwenden Sie den Hash der URL (zum Beispiel: window. location.hash) Benutzeroberfläche und URL synchronisieren;

3. <MemoryRouter>: Kann den Verlauf Ihrer „URL“ im Speicher speichern (ohne die Adressleiste zu lesen und zu schreiben); >

4. : Bereitstellung von Routing-Unterstützung für die Verwendung von React Native;

5. <<a href="http://www.php.cn/wiki/188.html" target="_blank">Static</a>Router> ：从不会改变地址；

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

反面典型在这里：

<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在没有 <p> 爸爸的保护下，会报如下异常信息：

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

<Route> 组件有如下属性：

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	是

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

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

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

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

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

// 行内渲染示例
<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: 第三坑！ <Route component> 的优先级要比 <Route render> 高，所以不要在同一个 <Route> 中同时使用这两个属性。

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

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 />

<NavLink> 是 <Link> 的一个特定版本, 会在匹配上当前 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>

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

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

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

如果现在的URL是 /about ，那么 <About> , <User> , 还有 <NoMatch> 都会被渲染，因为它们都与路径(path)匹配。这种设计，允许我们以多种方式将多个 <Route> 组合到我们的应用程序中，例如侧栏(sidebars)，面包屑(breadcrumbs)，bootstrap tabs等等。 然而，偶尔我们只想选择一个 <Route> 来渲染。如果我们现在处于 /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 ， <Switch> 将开始寻找匹配的 <Route> 。 <Route path="/about"/> 将被匹配， <Switch> 将停止寻找匹配并渲染 <About> 。同样，如果我们处于 /michael ， <User> 将被渲染。

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

推荐阅读：

So lösen Sie domänenübergreifende Probleme in Vue-Projekten richtig

So verwenden Sie die Vue-Cli-Axios-Anfragemethode und die domänenübergreifende Verarbeitung

Das obige ist der detaillierte Inhalt vonVerwenden von React Router v4 von Grund auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!