React Router v4の使い方を詳しく解説

今回は React Router v4 の使用方法について詳しく説明します。 React Router v4 を使用する際の 注意事項 は何ですか? 実際の事例を見てみましょう。

丁寧な紹介

Just Component の API 設計コンセプトに従っています。初心者の学習の難しさはかなり軽減されますが、以前のプロジェクトの再構築であれば、まあ、言うことはありません。このアップグレードの主な機能は次のとおりです:

• 宣言型

• 構成可能性

すべてがコンポーネントです。したがって、アップグレードされるルート、リンク、スイッチなどはすべて共通のコンポーネントです。

1. react-router React Router core

2. react-router-dom DOMバインディング用のReact Router

3. react-router-native React Native用のReact Router

4. react- router-redux React Router と Redux の統合

5. react-router-config 静的ルーティング設定ヘルパー

プラグインの初期導入

注意、前方には高いエネルギーがあり、スタートする最初のピットはすぐそこですreact 和  react-dom ，那么 react-router 和 react-router-dom 是不是两个都要引用呢？ 注意，前方高能，入门第一坑就在这里 。他们两个只要引用一个就行了，不同之处就是后者比前者多出了 <Link> <BrowserRouter> 这样的 DOM 类组件。因此我们只需引用 react-router-dom 这个包就OK了。当然，如果搭配 redux ，你还需要使用 react-router-redux 。

主要组件简介

在4.0之前版本的 API 中， <Router> 组件的 children 只能是 React Router 提供的各种组件，如 <Route>、<IndexRoute>、<Redirect> 等。而在 React Router 4 中，你可以将各种组件及标签放进 <Router> 组件中，他的角色也更像是 Redux 中的 <Provider> 。**不同的是 <Provider> 是用来保持与 store 的更新，而 <Router> 是用来保持与 location 的同步。**示例如下：

// 示例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是所有路由组件共用的底层接口，一般我们的应用并不会使用这个接口，而是使用高级的路由：

1. <BrowserRouter> ：使用 HTML5 提供的 history API 来保持 UI 和 URL 的同步；

2. <HashRouter> ：使用 URL 的 hash (例如：window.location.hash) 来保持 UI 和 URL 的同步；

3. <MemoryRouter> ：能在内存保存你 “URL” 的历史纪录(并没有对地址栏读写)；

4. <NativeRouter> ：为使用React Native提供路由支持；

5. <<a href="//m.sbmmt.com/wiki/188.html" target="_blank">Static</a>Router>。違いは、後者には前者よりも <Link><browserrouter></browserrouter> などの DOM クラス コンポーネントが多く含まれることです。したがって、react-router-dom パッケージを参照するだけで済みます。もちろん、redux と組み合わせる場合は、react-router-redux も使用する必要があります。

   🎜🎜主要コンポーネントの紹介🎜🎜🎜 4.0 より前の API バージョンでは、<Router> コンポーネントの子は、<Route&gt など、React Router によって提供されるさまざまなコンポーネントのみにすることができます。 ; 、<IndexRoute>、<Redirect> など。 React Router 4 では、さまざまなコンポーネントとラベルを <Router> コンポーネントに入れることができ、その役割は Redux code> の <Provider> に似ています。 **違いは、<Provider> はストアとの最新情報を維持するために使用されるのに対し、<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>

   ログイン後にコピー

   ログイン後にコピー
   🎜Router は、すべてのルーティング コンポーネントによって共有される基礎となるインターフェイスです。通常、アプリケーションはこのインターフェイスを使用しませんが、高度なルーティングを使用します: 🎜🎜🎜🎜<BrowserRouter> code >: HTML5 が提供する履歴 API を使用して、UI と URL の同期を維持します。 🎜🎜🎜🎜<HashRouter>: URL のハッシュを使用します (例: window.location.hash)。 UI と URL の同期を維持するため 🎜🎜🎜🎜<MemoryRouter>: (アドレス バーの読み取りと書き込みを行わずに) 🎜🎜🎜🎜: React Native を使用するためのルーティング サポートを提供します 🎜🎜🎜🎜<<a href="//m.sbmmt.com/wiki/188.html" ターゲット="_blank"> Static🎜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>

<Router>
 <p>
 <Route exact path="/" component={Home}/>
 <Route path="/news" component={NewsFeed}/>
 </p>
</Router>
// 如果应用的地址是/,那么相应的UI会类似这个样子：
<p>
 <Home/>
</p>
// 如果应用的地址是/news,那么相应的UI就会成为这个样子：
<p>
 <NewsFeed/>
</p>

// 行内渲染示例
<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}/>

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

// 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 path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>

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