thin-react-router

thin-react-router

A thin react router which is just 9KB(gzip:3KB). It is especially suitable for small websites. If you want a more powerful router, please refer to react-router.

usage

Install the package npm install -S thin-react-router Import the component you want to use, just like react-router

Components

It contains the following components:

<HashRouter>

A hash router. The following props are accepted:

routes

A route array to configure the routes. A route config can accept the following props:

name	type	comment
path	string	route path
component	func	component to render when matches
fallback	bool	when true, the route is a fallback route. Note that only the first fallback route will be respect.
exact	bool	when true, the route path should match exactly
strict	bool	when true, the trailing slash on a location’s pathname will be taken into consideration when determining if the location matches the current URL.
sensitive	bool	when true, the matching is case-sensitive
Note that the route matching will stop if any of the route matches. The matching order is aligned with the routes array.

<BrowserRouter>

A browser router based on HTML5 History API. Its props are same as HashRouter.

<Link>

Provides declarative, accessible navigation around your application. The following props are accepted:

to: string

The pathname or location to link to.

target: string

Target attributes which is same as <a>.

replace: bool

When true, the current history entry will be replaced.

innerRef: function

Returns the inner component ref.

children: node

<Link> can accept inner children, just like <a>.

onClick: function

Will be called when user click the link, before jump to the new path. Call evt.preventDefault() can prevent the navigation.

Example

The following code defined a hash router:

...
import { HashRouter } from 'thin-react-router';
import Main from './main';
import About from './about';

ReactDOM.render(
  <HashRouter
    routes={[
      {
        path: '/',
        component: Main,
        exact: true,
        fallback: true,
      },
      { path: '/about', component: About },
    ]}
  />,
  document.getElementById('root'),
);

The Main component can be defined as follows:

...
import { Link } from 'thin-react-router';

export default () => {
  return (
    <div>
      This is an example of thin-react-router.
      <Link to="/about">Go to About</Link>
    </div>
  );
}