今回は、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'))
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> ) } })
3 つのネストされたルート
ナビゲーション バーを追加したい場合は、すべてのページに存在する必要があります。ルーターがない場合は、各ナビゲーション コンポーネントをカプセル化し、それを各ページ コンポーネントで参照およびレンダリングする必要があります。アプリケーションが成長するにつれて、コードは冗長になります。 React-router は、共有 UI コンポーネントをネストする別の方法を提供します。 実際、私たちのアプリは一連のネストされたボックスであり、対応する URL もこのネスト関係を示すことができます:<App> {/* url / */} <Repos> {/* url /repos */} <Repo/> {/* url /repos/123 */} </Repos> </App>
をパブリック コンポーネント App のパブリック パーツにネストすることでアプリを作成できます。ナビゲーション バーとして、コンポーネント上のナビゲーションを共有できます: // index.js
// ...
render((
<Router history={hashHistory}>
<Route path="/" component={App}>
{/* 注意这里把两个子组件放在Route里嵌套在了App的Route里/}
<Route path="/repos" component={Repos}/>
<Route path="/about" component={About}/>
</Route>
</Router>
), document.getElementById('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: 'red' }}>About</Link></li> <li><Link to="/repos" activeStyle={{ color: 'red' }}>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]:// modules/Repo.js
import React from 'react'
export default React.createClass({
render() {
return (
<p>
{/* 注意这里通过this.props.params.repoName 获取到url中的repoName参数的值 */}
<h2>{this.props.params.repoName}</h2>
</p>
)
}
})
// 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'))
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'))
同様に、デフォルトのリンクコンポーネント 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中文网其它相关文章!
推荐阅读:
以上がReact ルーティング管理 React Router の使用手順の詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。