React-router-url NPM

React Router URL

A simple, flexible and zero dependencies router for React and Typescript support.

Update v0.7.6

It uses React hooks and URL api.

Install

yarn add react-router-url

Get Started

Define your router

You can define your route names then use the hook useRouter to right your routes

type NestedRouteName = '/account' | '/account/settings' | '/account/contact';
const Account: React.FC = () => {
  return useRouter<RouteName>([
    { path: '/account/settings', component: <Settings /> },
    { path: '/account/contact', component: <Contact /> },
    { path: '/account', component: <AccountMenu /> },
  ]);
};

type RouteName = '/' | '/home' | '/account';

const Router: React.FC = () => {
  return useRouter<RouteName>([
    { path: '/', component: <Hello />, exact: true },
    { path: '/home', component: <Home /> },
    { path: '/account', component: <Account /> },
  ]);
};

After that you can use your Router component where you want.

About useRouter

You can use it to create Router componant every where. It's supported for nested router too.

Core

The core concept is base on history object and useURL hook.

history

It's based on window.history

push

This method will redirect you to the new url.

inputs :

nextUrl: the url target
params: if you need it you can add object with params

exemple :

history.push('/login')}
history.push('/account', { user: 'joe' })}

goBack

history.goBack();

canGoBack

if (history.canGoBack()) {
  history.goBack();
}

useURL

It's a hook for react component, watching path and params.

export const Account = () => {
  const { path, params } = useURL();
  return (
    <div>
      <div>Path : {path}</div>
      <div>User : {params.user}</div>
    </div>
  );
};