rax-use-router with history

[yuanyan]

history 的职责与浏览器里的 history 相同，rax-use-router 里的 push、replace、go 等同与 history：

import { createElement, Fragment } from 'rax';
import { useRouter, push } from 'rax-use-router';
import { createHashHistory } from 'history';
import Foo from './Foo';
import NotFound from './NotFound';

const config = () => {
  return {
    history: createHashHistory(),
    routes: [
      // Static Component
      {
        path: '',
        component: <>
          <button onClick={() => push('/home')}>go home</button>
          <button onClick={() => push('/404')}>go 404</button>
        </>,
      },
      {
        path: '/home',
        routes: [
          // Dynamic Component 
          {
            path: '',                  // www.example.com/home
            component: () => <>
              <button onClick={() => push('/foo')}>go foo</button>
              <button onClick={() => push('/bar')}>go bar</button>
              <button onClick={() => push('/home/jack')}>go jack</button>
            </>,
          },
          // URL Parameters
          {
            path: '/:username',        // www.example.com/home/xxx
            component: (params) => <>
              <p>{params.username}</p>
              <button onClick={ () => push('/home') }>Go home</button>
            </>
          }
        ]
      },
      // Code Splitting
      {
        path: '/bar',
        routes: [
          {
            path: '',                 // www.example.com/bar
            component: () => import(/* webpackChunkName: "bar" */ './Bar'),
          },
        ],
      },
      {
        path: '/foo',                 // www.example.com/foo
        component: () => <Foo />,  
      },
      // No match (404)
      {
        component: () => <NotFound />,
      }
    ]
  }
};

export default function Example() {
  const { component } = useRouter(config);
  return component;
}

// Foo.jsx
import { createElement } from 'rax';
import { push } from 'rax-use-router';

export default function Foo() {
  return <button onClick={ () => push('/home') }>Go home</button>
}

// Bar.jsx
import { createElement } from 'rax';
import { push } from 'rax-use-router';

export default function Bar() {
  return <button onClick={ () => push('/home') }>Go home</button>
}

// NotFound.jsx
import { createElement } from 'rax';
import { replace } from 'rax-use-router';

export default function NotFound() {
  return <button onClick={ () => replace('/home') }>Go home</button>
}

[wssgcg1213]

1. 包名的问题, why not use rax-router instead of rax-use-router, use 在这里并没有多少语义的, 仅能代表其支持 hooks 的特性
2. 这里的 router 方法return的config对象, 其实对齐的是 react-router@2/3 的<Router config={xxx} />, 这里感觉没有必要强包一个 useXxx, 接着使用 <Router> 和 <Route> 的嵌套就可
3. useComponent 的语义光从单词上来看并不明确, useRouter 或者 useRoute 会清晰一点:

import { useRouter } from 'rax-router';

export default function App(props) {
 const { params, match } = useRouter({ path: '/' }); // 会解析当前路径
  if (match) {
    const { params1, match1 } = useRouter({ path: '/users/:id' }); // 会解析当前路径
    if (match1) {
      return <UserPage id={params.id} />;
    } else {
      return <NotFound />
    }
  } else{
     return <NotFound />;
  }
}

[wssgcg1213]

4. history 的提议:

import { useHistory } from 'rax-router';

export default function App(props) {
  useHistory(createBrowserHistory);
  // ...
}

history 在一个工程里是唯一的, 可以直接在闭包里维护一个 history 的唯一引用.
useHistory(fn: () => history)