白羊的空间

Reach Router

今天在看一个项目的时候,无意间看到推荐 reach/router 这个React路由组件,然后就看了下组件的使用,感觉使用比react-router更加简单直接,库也比较小,用法和react-router类似但是更简洁,这里记录下换成reach时碰到的问题,官网地址如下:

Reach Router

  1. router 会自动跳转到 主路由加载的内容上
    其实就是focus变化,reach会将focus指定到主router渲染的内容,所以就导致页面会”跳”到新内容上,解决办法是给所有router添加 primary={false} 属性:
    1
    2
    3
    4
    <Router primary={false}>
    	<Company path="/" />
    	<Brand path="/Brand" />
    </Router>
  2. 嵌套路由(router加载的组件里再使用router)
    在子组件里使用路由时也使用router包围即可:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    render(
      <Router>
    	<Home path="/" />
    	<Dash path="dashboard/*" />
      </Router>
    )

    const Dash = () => (
      <div>
    	<p>A nested router</p>
    	<Router>
    	  <DashboardGraphs path="/" />
    	  <InvoiceList path="invoices" />
    	</Router>
      </div>
    )
  3. NavLink
    reach 没有 react-router 里的 NavLink,不能直接通过activeClassName的方式增加属性,但reach的Link组件提供了getProps参数,可以通过该方法实现NavLink:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    import React, { Component } from 'react';
    import { Link } from '@reach/router';

    export default class NavLink extends Component {
    	render() {
    		return (
    			<React.Fragment>
    				<Link
    					{...this.props}
    					getProps={({ isCurrent, isPartiallyCurrent, href, location }) => {
    						// the object returned here is passed to the
    						// anchor element's props
    						if (href !== "/") {
    							return isPartiallyCurrent ? { className: 'active' } : null;
    						} else {
    							return isCurrent ? { className: 'active' } : null;
    						}
    					}}
    				/>
    			</React.Fragment>
    		)
    	}
    }
    其中四个参数意义:
  • isCurrent - true if the location.pathname is exactly the same as the anchor’s href.
  • isPartiallyCurrent - true if the location.pathname starts with the anchor’s href.
  • href - the fully resolved href of the link.
  • location - the app’s location.
React