React ルーティング管理 React Router の使用手順の詳細

php中世界最好的语言
リリース: 2018-05-22 11:17:12
オリジナル
2274 人が閲覧しました

今回は、React Routing Management で React Router を使用するための手順について詳しく説明します。React Routing Management で React Router を使用する際の 注意事項とは何ですか?

React プロジェクトには通常、管理する必要がある URL がたくさんあります。最も一般的に使用されるソリューションは React Router で、主に英語の公式ドキュメントを読んで将来の参考のためにそれをまとめました。

React Router は何をするものですか? 公式の紹介文は次のとおりです:

React 用の完全なルーティング ライブラリで、UI と URL の同期を維持します。これには、遅延コード読み込み、動的ルート マッチングなどの強力な機能を備えたシンプルな API が含まれています。位置遷移処理が組み込まれています。URL を後から考えるのではなく、最初に考えてください。

主なアイデアは、UI コンポーネントと URL の同期を維持し、次のような強力な機能を実現することです: シンプルな API 読み込みによる遅延コード、動的ルートマッチング、パス遷移処理など

ここに React Router の使用法をいくつか示します:

1 シンプルなレンダリング ルート

留意すべき点の 1 つは、Router はレンダリング可能な React コンポーネントであるということです。ここでは

// ...
import { Router, Route, hashHistory } from 'react-router'
render((
 <Router history={hashHistory}>
  <Route path="/" component={App}/>
 </Router>
), document.getElementById('app'))
ログイン後にコピー
hashHistory が使用されます。ルーティング履歴と URL のハッシュ部分を管理します。

さらにルートを追加し、対応するコンポーネントを指定します

import About from './modules/About'
import Repos from './modules/Repos'
render((
 <Router history={hashHistory}>
  <Route path="/" component={App}/>
  <Route path="/repos" component={Repos}/>
  <Route path="/about" component={About}/>
 </Router>
), document.getElementById('app'))
ログイン後にコピー

2つのLink

// modules/App.js
import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
 render() {
  return (
   <p>
    <h1>React Router Tutorial</h1>
    <ul role="nav">
     <li><Link to="/about">About</Link></li>
     <li><Link to="/repos">Repos</Link></li>
    </ul>
   </p>
  )
 }
})
ログイン後にコピー
ここではLinkコンポーネントが使用されており、リンクをレンダリングし、 to 属性を使用して対応するルートを指すことができます。

3 つのネストされたルート

ナビゲーション バーを追加したい場合は、すべてのページに存在する必要があります。ルーターがない場合は、各ナビゲーション コンポーネントをカプセル化し、それを各ページ コンポーネントで参照およびレンダリングする必要があります。アプリケーションが成長するにつれて、コードは冗長になります。 React-router は、共有 UI コンポーネントをネストする別の方法を提供します。

実際、私たちのアプリは一連のネストされたボックスであり、対応する URL もこのネスト関係を示すことができます:

<App>    {/* url /     */}
 <Repos>  {/* url /repos   */}
  <Repo/> {/* url /repos/123 */}
 </Repos>
</App>
ログイン後にコピー
したがって、サブコンポーネント

をパブリック コンポーネント App のパブリック パーツにネストすることでアプリを作成できます。ナビゲーション バーとして、コンポーネント上のナビゲーションを共有できます:

次に、アプリ内で子をレンダリングします:

// modules/App.js
// ...
 render() {
  return (
   <p>
    <h1>React Router Tutorial</h1>
    <ul role="nav">
     <li><Link to="/about">About</Link></li>
     <li><Link to="/repos">Repos</Link></li>
    </ul>
    {/* 注意这里将子组件渲染出来 */}
    {this.props.children}
   </p>
  )
 }
// ...
ログイン後にコピー

4 つの有効なリンク Link コンポーネントと a タグの違いの 1 つは、リンクは、それが指すパスが有効なルートであるかどうかを知ることができます。

<li><Link to="/about" activeStyle={{ color: &#39;red&#39; }}>About</Link></li>
<li><Link to="/repos" activeStyle={{ color: &#39;red&#39; }}>Repos</Link></li>
ログイン後にコピー

activeStyle を使用して有効なリンクのスタイルを指定することも、activeClassName を使用して有効なリンクのスタイル クラスを指定することもできます。

ほとんどの場合、リンクが有効かどうかを知る必要はありませんが、この機能はナビゲーションにおいて非常に重要です。たとえば、ナビゲーション バーには正当なルーティング リンクのみを表示できます。

// modules/NavLink.js
import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
 render() {
  return <Link {...this.props} activeClassName="active"/>
 }
})
ログイン後にコピー
// modules/App.js
import NavLink from './NavLink'
// ...
<li><NavLink to="/about">About</NavLink></li>
<li><NavLink to="/repos">Repos</NavLink></li>
ログイン後にコピー

.active リンクのみを表示するように NavLink で指定できるため、ルートが無効な場合、リンクはナビゲーション バーに表示されません。

5 つの URL パラメーター次の URL を検討してください:

/repos/reactjs/react-router

/repos/facebook/react


これらは次の形式に対応する可能性があります:

/repos/: userName/ :repoName

: 変数パラメータ

が続きます。 URL 内の

変数パラメータ

は、this.props.params[paramsName]:

// index.js
// ...
// import Repo
import Repo from './modules/Repo'
render((
 <Router history={hashHistory}>
  <Route path="/" component={App}>
   <Route path="/repos" component={Repos}/>
   {/* 注意这里的路径 带了 :参数 */}
   <Route path="/repos/:userName/:repoName" component={Repo}/>
   <Route path="/about" component={About}/>
  </Route>
 </Router>
), document.getElementById('app'))
ログイン後にコピー
から取得できます。次に、/repos/reactjs/react-router および /repos/facebook にアクセスしてください。 /react 別のコンテンツが表示されます。

6 つのデフォルト ルート

// index.js
import { Router, Route, hashHistory, IndexRoute } from 'react-router'
// and the Home component
import Home from './modules/Home'
// ...
render((
 <Router history={hashHistory}>
  <Route path="/" component={App}>
   {/* 注意这里* /}
   <IndexRoute component={Home}/>
   <Route path="/repos" component={Repos}>
    <Route path="/repos/:userName/:repoName" component={Repo}/>
   </Route>
   <Route path="/about" component={About}/>
  </Route>
 </Router>
), document.getElementById('app'))
ログイン後にコピー
IndexRoute は、デフォルト パス/対応するコンポーネントを指定するためにここに追加されます。 path 属性値がないことに注意してください。

同様に、デフォルトのリンクコンポーネント IndexLink もあります。 ,

7 ブラウザ履歴の使用 前の例では、常に実行できる hashHistory を使用してきましたが、より良い方法は、ハッシュ ポート (#) に依存しないブラウザ履歴を使用することです。

首先需要改 index.js:

// ...
// bring in `browserHistory` instead of `hashHistory`
import { Router, Route, browserHistory, IndexRoute } from 'react-router'
render((
{/* 注意这里 */}
 <Router history={browserHistory}>
  {/* ... */}
 </Router>
), document.getElementById('app'))
ログイン後にコピー

其次需要 修改webpack的本地服务配置,打开 package.json 添加 –history-api-fallback :

复制代码 代码如下:

"start": "webpack-dev-server --inline --content-base . --history-api-fallback"

最后需要在 index.html中 将文件的路径改为相对路径:

<!-- index.html -->
<!-- index.css 改为 /index.css -->
<link rel="stylesheet" href="/index.css" rel="external nofollow" >
<!-- bundle.js 改为 /bundle.js -->
<script src="/bundle.js"></script>
ログイン後にコピー

这样就去掉了url中的 # 。

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

推荐阅读:

AngularJS模态框模板ngDialog使用案例分享

Node.js使用对话框ngDialog实现步骤详解

以上がReact ルーティング管理 React Router の使用手順の詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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