react-router-rx

基于react实现的一个路由库，支持 hashRouter 和 browserRouter，类组件以及 hook

作者：constRen

install

npm install react-router-rx
yarn add react-router-rx

API

BrowserRouter

对Router接口的实现，使得页面和浏览器的history保持一致

import { BrowserRouter as Router, Route} from 'react-router-rx';
  const SuspenseHome = () => {
    return (
      <div>
        SuspenseHome
      </div>
    )
  }

  const NavLink1 = () => {
    return (
      <div>
        NavLink1
      </div>
    )
  }
<Router>
    <Route exact path="/" component={SuspenseHome} />
    <Route exact path="/NavLink1" component={NavLink1} />
</Router>

HashRouter

才有hash模式的路由

import { HashRouter as Router, Route} from 'react-router-rx';
  const SuspenseHome = () => {
    return (
      <div>
        SuspenseHome
      </div>
    )
  }

  const NavLink1 = () => {
    return (
      <div>
        NavLink1
      </div>
    )
  }
<Router>
    <Route exact path="/" component={SuspenseHome} />
    <Route exact path="/NavLink1" component={NavLink1} />
</Router>

Route

有以下属性：

• path：值是一个string，用来匹配url
• exact：值是一个boolean，是否精确匹配，默认值为false
• strict：值是一个boolean，指明路径只匹配以斜线结尾的路径，默认值为false
• sensitive：值是一个boolean，指明匹配时是否忽略大小写，非必要属性，默认为 false

Route组件里，指定渲染的内容有三种方法

• component: 值是一个组件，在path匹配成功之后会绘制这个组件
• render：值为一个函数，此函数会返回一个要渲染的render元素
• children：值为一个children函数，此函数会返回一个children

子组件可以接收到 history location match 三个对象的数据

import { BrowserRouter as Router, Route} from 'react-router-rx';
<Router>
    <Route exact path="/" component={SuspenseHome} />
    <Route exact path="/NavLink1" component={NavLink1} />
</Router>

Switch

加快路由匹配的速度，匹配成功之后就立即返回，不会继续往下匹配

import {BrowserRouter as Router, Route,Switch} from 'react-router-rx';

const SuspenseHome = () => {
    return (
        <div>
            SuspenseHome
        </div>
    )
}

const NavLink1 = () => {
    return (
        <div>
            NavLink1
        </div>
    )
}

const NavLink2 = () => {
    return (
        <div>
            NavLink2
        </div>
    )
}

const NavLink3 = () => {
    return (
        <div>
            NavLink3
        </div>
    )
}
<Router>
    <Switch>
        <Route exact path="/" component={SuspenseHome} />
        <Route exact path="/NavLink1" component={NavLink1} />
        <Route exact path="/NavLink2" component={NavLink2} />
        <Route exact path="/NavLink3" component={NavLink3} />
    </Switch>
</Router>

Link

指定路由导航

属性：

• to: string | {pathname:string,state:any}，将要跳转的路径和属性

import {Link} from 'react-router-rx';
<Link to="/">首页</Link>

NavLink

特殊的 Link 组件，可以用于指定当前导航高亮

属性：

• to: string | {pathname:string,state:any}， 将要跳转的路径和属性
• activeClassName：string，指定高亮的类名，默认值为'active'
• className：string，基本的类名
• activeStyle：object，激活的行内样式

import {NavLink} from 'react-router-rx';
<NavLink activeStyle={{ color: 'red' }} to="/NavLink2">NavLink2</NavLink>
<NavLink activeStyle={{ color: 'red' }} to="/NavLink3">NavLink3</NavLink>
<NavLink activeStyle={{ color: 'red' }} to="/redirect">redirect</NavLink>

withRouter

高阶组件，接收一个普通非路由组件，让此组件具备路由组件所特有的API，返回值是一个新组件

import {withRouter} from 'react-router-rx';

  class Header extends React.Component {
    render() {
      return <div onClick={() => this.props.history.push('/')}>{this.props.title}</div>
    }
  }
  const NavHeader = withRouter(Header);

<NavHeader title="首页" />

Redirect

路由重定向

属性：

• to: string 将要跳转的路径和属性

import {BrowserRouter as Router, Route,Switch} from 'react-router-rx';

const SuspenseHome = () => {
    return (
        <div>
            SuspenseHome
        </div>
    )
}

const NavLink1 = () => {
    return (
        <div>
            NavLink1
        </div>
    )
}

const NavLink2 = () => {
    return (
        <div>
            NavLink2
        </div>
    )
}

const NavLink3 = () => {
    return (
        <div>
            NavLink3
        </div>
    )
}
<Router>
    <Switch>
        <Route exact path="/" component={SuspenseHome} />
        <Route exact path="/NavLink1" component={NavLink1} />
        <Route exact path="/NavLink2" component={NavLink2} />
        <Route exact path="/NavLink3" component={NavLink3} />
        <Redirect to='/NavLink1' />
    </Switch>
</Router>

useHistory

获取 Router 组件构建的 history 对象

import {useHistory} from 'react-router-rx';
function profile() {
    let history = useHistory();
    console.log('history', history);
    return <div>profile</div>
}
<Route exact path="/profile/:id" component={profile} />

useLocation

获取当前页面对应的 url 信息，如 pathname、state

import {useLocation} from 'react-router-rx';
function profile() {
    let location = useLocation();
    console.log('location', location);
    return <div>profile</div>
}
<Route exact path="/profile/:id" component={profile} />

useRouteMatch

获取路由匹配对象 match

import {useRouteMatch} from 'react-router-rx';
function profile() {
    let match = useRouteMatch({
        path: '/profile/:id',
        strict: true,
        sensitive: true
    });
    console.log('match',match);
    return <div>profile</div>
}
<Route exact path="/profile/:id" component={profile} />

useParams

获取动态路径参数 params

import {useParams} from 'react-router-rx';
function profile() {
    let params = useParams();
    console.log('params', params);
    return <div>profile</div>
}
<Route exact path="/profile/:id" component={profile} />

Prompt

监视用户是否离开当前页面，离开当前页面时可以触发警告

属性：

• when：boolean 是否触发警告
• message：fn 警告提示函数

import { Prompt } from 'react-router-rx';
<Prompt when={true}
    message={() => `请问你确定要离开此页面，并跳到xxx里吗?`} />;

路由懒加载

import {BrowserRouter as Router, Route,Switch,Lazy} from 'react-router-rx';
function Home() {
    return <div>Home</div>
}
let LazyHome = Lazy(() => import('./Home'));

function SuspenseLazyHome() {
  return (
    <React.Suspense fallback={<div>loading</div>}>
      <LazyHome />
    </React.Suspense>
  )
}

<Router>
    <Switch>
        <Route exact path="/suspenselazyhome" component={SuspenseLazyHome} />
    </Switch>
</Router>