React-router v4の利用手順を詳しく解説

php中世界最好的语言
リリース: 2018-05-24 10:55:41
オリジナル
1894 人が閲覧しました

今回は React-router v4 を使用する手順について詳しく説明します。 React-router v4 を使用する際の 注意事項 は何ですか?実際のケースを見てみましょう。おそらく、react-router を学習する最良の方法は、react-router-dom v4 を使用してマルチページの React アプリケーションを作成することです。この反応アプリケーションには、ログイン、登録、ホームページ、連絡先、その他のページが含まれます。まずは、React Router v4 の概念と v3 との違いを見てみましょう。

React router v4 vs v3

v4 は React router を書き直したものであるため、v3 とは多くの違いがあります。主なものは次のとおりです:

React Router v4 では、ルーティングは一元化されなくなりました。これはアプリケーションのレイアウトと UI の一部になります。
  • ブラウザで使用されるルーターは react-router-dom にあります。したがって、ブラウザで使用する場合は、react-router-dom をインポートするだけで済みます。
  • react-router-dom里。所以,浏览器里使用的时候只需要import react-router-dom就可以。

  • 新的概念BrowerRouterHashRouter。他们各自服务于不同的情景下。详见下文。

  • 不在使用{props.children}来处理嵌套的路由。

  • v4的路由默认不再排他,会有多个匹配。而v3是默认排他的,只会有一个匹配被使用。

react-router-dom是react-router中用于浏览器的。react-router被分为一下几部分:

  • react-router是浏览器和原生应用的通用部分。

  • react-router-dom是用于浏览器的。

  • react-router-native是用于原生应用的。

React-router vs react-router-dom vs react-router-native

react-router是核心部分。react-router-dom提供了浏览器使用需要的定制组件。react-router-native则专门提供了在原生移动应用中需要用到的部分。所以,如果在本例中实现浏览器开发就只需要安装react-router-dom

安装

如上所说,我们使用react开发web应用,所以只需要安装react-router-dom

  npm install react-router-dom --save
ログイン後にコピー

理解和使用react-router

  • BrowserRouter,这是对Router接口的实现。使得页面和浏览器的history保持一致。如:window.location

  • HashRouter,和上面的一样,只是使用的是url的hash部分,比如:window.location.hash

  • MemoryRouter

  • NativeRouter,处理react native内的路由。

  • <a href="http://www.php.cn/wiki/188.html" target="_blank">Static</a>Router,处理静态路由,和v3一样。

BrowserRouter vs HashRouter

在react-router的各种router中,<BrowserRouter><HashRouter>是可以在浏览器中使用的。如果你使用的是一个非静态的站点、要处理各种不同的url那么你就需要使用BrowserRouter。相反的如果你的server只处理静态的url,那么就使用HashRouter

理解和使用Route

<Route>组件是react router v4里最有用的组件。背后的使用哲学也很简单,无论何时你需要在匹配某个路径的时候绘制一个组件,那么就可以使用Route组件。

Route组件可以使用如下的属性:

  • path属性,字符串类型,它的值就是用来匹配url的。

  • component属性,它的值是一个组件。在path新しい概念 BrowserRouterHashRouter。それぞれが異なる状況に対応します。詳細については以下を参照してください。

  • は、ネストされたルートの処理に {props.children} を使用しなくなりました。

  • v4 ルーティングはデフォルトでは排他的ではなくなり、複数の一致が存在するようになります。 v3 はデフォルトで排他的であり、1 つの一致のみが使用されます。

    🎜
🎜react-router-dom はブラウザ用の React-router で使用されます。 react-router は次の部分に分かれています: 🎜🎜🎜🎜react-router はブラウザとネイティブ アプリケーションの共通部分です。 🎜🎜🎜🎜react-router-dom はブラウザ用です。 🎜🎜🎜🎜react-router-native はネイティブ アプリケーション用です。 🎜🎜🎜React-router 対、react-router-dom 対、react-router-native🎜🎜react-router がコア部分です。 react-router-dom は、ブラウザでの使用に必要なカスタマイズされたコンポーネントを提供します。 react-router-native は、ネイティブ モバイル アプリケーションで必要な部分を具体的に提供します。したがって、この例でブラウザ開発を実装する場合は、react-router-dom をインストールするだけで済みます。 🎜🎜インストール🎜🎜 上で述べたように、Web アプリケーションの開発には React を使用するため、react-router-dom をインストールするだけで済みます。 🎜
<Route exact path="/" component={HomePage} />
ログイン後にコピー
ログイン後にコピー
🎜 Router インターフェースの実装である、react-router🎜🎜🎜🎜BrowserRouter を理解して使用してください。ページとブラウザの履歴に一貫性を持たせます。例: window.location。 🎜🎜🎜🎜HashRouter は、window.location.hash などの URL のハッシュ部分を使用することを除いて、上記と同じです。 🎜🎜🎜🎜MemoryRouter、🎜🎜🎜🎜NativeRouter、反応ネイティブでルーティングを処理します。 🎜🎜🎜🎜<a href="http://www.php.cn/wiki/188.html" target="_blank">Static🎜Router</a>、v3 と同じ静的ルーティングを処理します。 。 🎜🎜

BrowserRouter と HashRouter

🎜 React-router のさまざまなルーターのうち、<BrowserRouter> と <HashRouter> はブラウザで使用できます。非静的サイトを使用していて、さまざまな URL を処理したい場合は、BrowserRouter を使用する必要があります。逆に、サーバーが静的 URL のみを処理する場合は、HashRouter を使用します。 🎜🎜Route を理解して使用する🎜🎜<Route> コンポーネントは、React Router v4 で最も便利なコンポーネントです。その背後にある使用哲学も非常に単純です。特定のパスに一致するときにコンポーネントを描画する必要がある場合は、いつでも Route コンポーネントを使用できます。 🎜🎜Route コンポーネントは次の属性を使用できます: 🎜🎜🎜🎜path 属性、文字列 🎜 型。その値は URL と一致するために使用されます。 🎜🎜🎜🎜component 属性、その値はコンポーネントです。このコンポーネントは、path が正常に一致した後に描画されます。 🎜🎜🎜🎜exact 属性。この属性は、このルートが排他的に一致するかどうかを示すために使用されます。 🎜🎜🎜🎜strict 属性。この属性は、パスがスラッシュで終わるパスのみと一致することを指定します。 🎜

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

  • render属性,一个返回React组件的方法。传说中的rencer-prop就是从这里来的。

  • children属性,返回一个React组件的方法。只不过这个总是会绘制,即使没有匹配的路径的时候。

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

  • match

  • location

  • history

如:
使用组件:

<Route exact path="/" component={HomePage} />
ログイン後にコピー
ログイン後にコピー

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

<Route path="/" render={()=><p>HomePage</p>} />
ログイン後にコピー

来看哥更复杂的:

const FadingRoute = ({ component, ...rest }) => (
  <Route {...rest} render={(props) => (
    <FadeIn>
      <componnet {...props} />
    </FadeIn>
  )} />
)
<FadingRoute path="/cool" component={Something} />
ログイン後にコピー

使用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>
  )} />
)
ログイン後にコピー

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

URL / Path / Route的参数

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

<Route path="/:param1" component={HomePage} />
const HomePage = ({match}) => (
  <p>
    <h1> parameter => {match.params.param1}
  </p>
);
ログイン後にコピー

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

  • 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>
);
ログイン後にコピー

当被点击的时候,会跳转到路径:/

to属性的值可以是一个字符串,也可以是一个location(pathname, hash, state和search)对象。比如:

<Link to{{
  pathname: &#39;/me&#39;,
  search: &#39;?sort=asc&#39;,
  hash: &#39;#hash&#39;,
  state: { fromHome: true }
}} />
ログイン後にコピー

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

NavLinkLink的一个子类,在Link组件的基础上增加了绘制组件的样式,比如:

<NavLink to="/me" activeStyle={{SomeStyle}} activeClassName="selected">
  My Profile
</NavLink>
ログイン後にコピー

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

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

首先,引入必要的组件。比如:RouteBrowserRouter

import { BrowserRouter, Route } from 'react-router-dom';
ログイン後にコピー

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

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>
);
ログイン後にコピー

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

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>
ログイン後にコピー

最后,写App组件。

const App = () => (
  <BrowserRouter>
    <BaseLayout />
  </BrowserRouter>
)
render(<App />, document.getElementById('root'));
ログイン後にコピー

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

理解和使用非排他的路由

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

<Route path="/" exact component={HomePage} />
ログイン後にコピー

这是因为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>
);
ログイン後にコピー

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

理解排他路由

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

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

  <Route exact path="/" component={HomePage} />
  
  
  
ログイン後にコピー

浏览器历史

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

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

history.push("/my-path")
history.replace("/my-path")
ログイン後にコピー

用另外的方法可以写成:

<Link to="/my-path" />
<Redirect to="my-path" />
ログイン後にコピー

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

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

<Redirect to {{
  pathname: &#39;/register&#39;,
  search: &#39;?utm=something&#39;,
  state: { referrer: someplage.com }
}}>
ログイン後にコピー

或者,更为简单的:

<Redirect to="register" />
ログイン後にコピー

最后

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

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

推荐阅读:

Chart.js 轻量级HTML5图表绘制工具库使用步骤详解

Chart.js轻量级图表库使用案例解析

以上がReact-router v4の利用手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!