Explication détaillée des étapes d'utilisation de React-router v4-js tutoriel-php.cn

Cette fois, je vais vous apporter une explication détaillée des étapes pour utiliser React-router v4. Quelles sont les précautions lors de l'utilisation de React-router v4. Voici des cas pratiques, jetons un coup d'œil.

La meilleure façon d'apprendre React-Router est peut-être d'utiliser React-Router-Dom v4 pour écrire une application React de plusieurs pages. Cette application de réaction comprendra la connexion, l'inscription, la page d'accueil, les contacts et d'autres pages. Mais examinons d’abord le concept du React Router v4 et en quoi il diffère de la v3.

React router v4 vs v3

v4 est une réécriture de React router, il présente donc de nombreuses différences par rapport à la v3. Les principaux sont :

Dans React Router v4, le routage n'est plus centralisé. Il devient partie intégrante de la présentation de l'application et de l'interface utilisateur.
Le routeur utilisé par le navigateur est en react-router-dom. Par conséquent, lorsque vous l'utilisez dans le navigateur, il vous suffit d'importer react-router-dom.
Nouveaux concepts BrowerRouter et HashRouter. Ils servent chacun des situations différentes. Voir ci-dessous pour plus de détails.
n'utilise plus {props.children} pour gérer les itinéraires imbriqués.
Le routage v4 n'est plus exclusif par défaut et aura plusieurs correspondances. La v3 est exclusive par défaut et une seule correspondance sera utilisée.

react-router-dom est utilisé dans React-Router pour les navigateurs. react-router est divisé en parties suivantes :

react-router est une partie commune aux navigateurs et aux applications natives.
react-router-dom est destiné aux navigateurs.
react-router-native est destiné aux applications natives.

React-router vsreact-router-dom vsreact-router-native

react-router est la partie centrale. react-router-domFournit les composants personnalisés requis pour l'utilisation du navigateur. react-router-native fournit spécifiquement les pièces qui doivent être utilisées dans les applications mobiles natives. Par conséquent, si vous implémentez le développement d'un navigateur dans cet exemple, il vous suffit d'installer react-router-dom.

Installation

Comme mentionné ci-dessus, nous utilisons React pour développer des applications Web, nous n'avons donc besoin que d'installer react-router-dom.

  npm install react-router-dom --save

Copier après la connexion

Comprendre et utiliser React-Router

BrowserRouter, qui est l'implémentation de l'interface Router. Rendre la page et l'historique du navigateur cohérents. Tel que : window.location.
HashRouter est le même que ci-dessus, sauf qu'il utilise la partie hachage de l'url, comme : window.location.hash.
MemoryRouter,
NativeRouter, gèrent le routage en réaction native.
<a href="//m.sbmmt.com/wiki/188.html" target="_blank">Statique<code><a href="//m.sbmmt.com/wiki/188.html" target="_blank">Static</a>RouterRouteur, gère le routage statique, comme la v3.

BrowserRouter vs HashRouter

Parmi les différents routeurs de React-Router, <BrowserRouter> et <HashRouter> peuvent être utilisés dans le navigateur. Si vous utilisez un site non statique et souhaitez gérer différentes URL, vous devez utiliser BrowserRouter. Au contraire, si votre serveur ne gère que les URL statiques, utilisez HashRouter.

Comprendre et utiliser le composant Route

<Route> est le composant le plus utile de React Router v4. La philosophie d'utilisation derrière cela est également très simple. Chaque fois que vous avez besoin de dessiner un composant lorsque vous correspondez à un certain chemin, vous pouvez utiliser le composant Route. Les composants

Route peuvent utiliser les attributs suivants :

attribut path, type string, sa valeur est utilisée pour correspondre à l'url.
attribut de composant, sa valeur est un composant. Ce composant sera dessiné une fois que path aura été associé avec succès.
attribut exact, cet attribut est utilisé pour indiquer si cet itinéraire est une correspondance exclusive.
attribut strict, cet attribut précise que le chemin ne correspondra qu'aux chemins se terminant par une barre oblique.

还有其他的一些属性，可以用来代替component属性。

render属性，一个返回React组件的方法。传说中的rencer-prop就是从这里来的。
children属性，返回一个React组件的方法。只不过这个总是会绘制，即使没有匹配的路径的时候。

多数的时候是用component属性就可以满足。但是，某些情况下你不得不使用render或children属性。

match
location
history

如：
使用组件：

<Route exact path="/" component={HomePage} />

Copier après la connexion

使用render属性实现内联绘制：

<Route path="/" render={()=><p>HomePage</p>} />

Copier après la connexion

来看哥更复杂的：

const FadingRoute = ({ component, ...rest }) => (
  <Route {...rest} render={(props) => (
    <FadeIn>
      <componnet {...props} />
    </FadeIn>
  )} />
)
<FadingRoute path="/cool" component={Something} />

Copier après la connexion

使用children：

<ul>
  <ListItemLink to="/somewhere" />
  <LinkItemLink to="/somewhere-else" />
</ul>
const ListItemLink = ({to, ...rest}) => (
  <Route path={to} children={({math}) => (
    <li className={match ? &#39;active&#39; : &#39;&#39;}>
      <Link to={to} {...rest} />
    </li>
  )} />
)

Copier après la connexion

更多关于react-router v4如何匹配路径的内容，请移步这里。

URL / Path / Route的参数

通常情况下，我们都会在路径里添加参数。这样方便在不同的组件之间传递一些必要的数据。那么我们如何才能获取到这些传递的参数，并传递给组件中呢？我们只需要在路径的最后加上/:param。如：

<Route path="/:param1" component={HomePage} />
const HomePage = ({match}) => (
  <p>
    <h1> parameter => {match.params.param1}
  </p>
);

Copier après la connexion

一旦有路径可以匹配成功，那么就会穿件一个拥有如下属性的对象，并传入绘制的组件里：

url: 匹配的url。
path：就是path。
isExact：如果path和当前的widnow.location的path部分完全相同的话。
params：在URL里包含的参数。

理解并使用Link

Link是react router v4特有的一个组件。是用来代替上一版的anchor link。使用Link可以在React应用的不同页面之间跳转。与unclor会重新加载整个页面不同，Link只会重新加载页面里和当前url可以匹配的部分。

Link组件需要用到to属性，这个属性的值就是react router要跳转到的地址。如：

import { Link } from 'react-router-dom';
const Nav = () => (
  <Link to &#39;/&#39;>Home</Link>
);

Copier après la connexion

当被点击的时候，会跳转到路径：/。

to属性的值可以是一个字符串，也可以是一个location（pathname, hash, state和search）对象。比如：

<Link to{{
  pathname: &#39;/me&#39;,
  search: &#39;?sort=asc&#39;,
  hash: &#39;#hash&#39;,
  state: { fromHome: true }
}} />

Copier après la connexion

Link也可以使用replace属性，如果点击的话，那么history里的当前领会被replace。

和

NavLink是Link的一个子类，在Link组件的基础上增加了绘制组件的样式，比如：

<NavLink to="/me" activeStyle={{SomeStyle}} activeClassName="selected">
  My Profile
</NavLink>

Copier après la connexion

使用react router dom实现你的第一个demo

现在我们用react router dom来实现第一个demo。

首先，引入必要的组件。比如：Route和BrowserRouter。

import { BrowserRouter, Route } from 'react-router-dom';

Copier après la connexion

接下来，我们创建一些组件和一些Html标签。同时我们用react router v4里的Link和NavLink组件。

const BaseLayout = () => (
  <p className="base">
    <header>
      <p>React Router v4 Browser Example</p>
      <nav>
        <ul>
          <li><Link ="/">Home</Link></li>
          <li><Link ="/about">About</Link></li>
          <li><Link ="/me">Profile</Link></li>
          <li><Link ="/login">Login</Link></li>
          <li><Link ="/register">Register</Link></li>
          <li><Link ="/contact">Contact</Link></li>
        </ul>
      </nav>
    </header>
    <p className="container">
      <Route path="/" exact component={HomePage} />
      <Route path="/about" component={AboutPage} />
      <Route path="/contact" component={ContactPage} />
      <Route path="/login" component={LoginPage} />
      <Route path="/register" component={RegisterPage} />
      <Route path="/me" component={ProfilePage} />
    </p>
    <footer>
      React Router v4 Browser Example (c) 2017
    </footer>
  </p>
);

Copier après la connexion

然后我们来创建需要的组件：

const HomePage = () => <p>This is a Home Page</p>
const LoginPage = () => <p>This is a Login Page</p>
const RegisterPage = () => <p>This is a Register Page</p>
const ProfilePage = () => <p>This is a Profile Page</p>
const AboutPage = () => <p>This is a About Page</p>
const ContactPage = () => <p>This is a Contact Page</p>

Copier après la connexion

最后，写App组件。

const App = () => (
  <BrowserRouter>
    <BaseLayout />
  </BrowserRouter>
)
render(<App />, document.getElementById('root'));

Copier après la connexion

如你所见，react router v4的组件还非常的易用的。

理解和使用非排他的路由

在上例中，我们在HomePage组件的路由里使用了属性exact。

<Route path="/" exact component={HomePage} />

Copier après la connexion

这是因为v4中的路由默认都是非排他的，这一点和v3的实现思路截然不同。如果没有exact属性，HomePage组件和其他的组件就会同事绘制在页面上。

如，当用户点了登录连接以后，"/"和"/login"都满足匹配条件，对应的登录组件和Home组件就会同时出现在界面上。但是，这不是我们期待的结果，所以我们要给"/"path加上exact属性。

现在我们来看看非排他的路由有什么优点。假如我们有一个子菜单组件需要显示在profile页面出现的时候也出现。我们可以简单的修改BasicLayout来实现。

const BaseLayout = () =>  (
  <p className="base">
    <header>
      <p>React Router v4 Browser Example</p>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li>
            <Link to="/me">Profile</Link>
            <Route path="/me" component={ProfileMenu} />
          </li>
          {/*略*/}
        </ul>
      </nav>
    </header>
  </p>
);

Copier après la connexion

这样我们就会看到对应于"/me"路径的组件都绘制出来了。这就是非排他路由的好处。

理解排他路由

排他路由是react router v3的默认实现。只有第一个匹配的路由对应的组件会被绘制。这一点也可以用react router v4的Switch组件来实现。在Switch组件中，只有第一个匹配的路由<Route>或者<Redirect>会被绘制：

import { Switch, Route } from 'react-router';

  <Route exact path="/" component={HomePage} />

Copier après la connexion

浏览器历史

react router v4中，提供了一个history对象。这个对象包含了多个api，可以用来操作浏览器历史等。

你也可以在React应用里使用history对象的方法：

history.push("/my-path")
history.replace("/my-path")

Copier après la connexion

用另外的方法可以写成：

<Link to="/my-path" />
<Redirect to="my-path" />

Copier après la connexion

使用<Redirect>组件实现重定向

无论何时你要重定向到另外一个地址的时候，都可以使用Redirect组件：

<Redirect to {{
  pathname: &#39;/register&#39;,
  search: &#39;?utm=something&#39;,
  state: { referrer: someplage.com }
}}>

Copier après la connexion

或者，更为简单的：

<Redirect to="register" />

Copier après la connexion

最后

react router v4让开发react应用变得更加的简单。让react应用内的页面跳转更加简单。你只需要声明一个BrowserRouter或者HashRouter，然后在它的内部放上一系列的Route组件，这些主键只要包含path和component属性。无论何时有了匹配的路由，那么它就会进行非排他的绘制（所有匹配的路由都会绘制）。你也可以把Route放在Switch组件里来实现排他的绘制（只有第一个匹配的路由会被绘制）。你可以在路径中传递参数，match对象会保留这些参数。最后，所有在web中使用的路由组件都包含在react-router-dom中。只需要引入react-router-dom就可以使用。

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