3.1.0 • Published 2 years ago
@blockle/router v3.1.0
@blockle/router
Lightweight (browser only) router for React ~3k gzip.
Customisable with history
Get started
Install with yarn
yarn add @blockle/router history
Install with npm
npm install --save @blockle/router history
Example
import { Router, Route, Link } from '@blockle/router';
import createHistory from 'history/createBrowserHistory';
render(
<Router history={createHistory}>
<Route path="/" exact>
Home
<Link to="/contact">Contact</Link>
</Route>
<Route path="/contact">
Contact
<Link to="/">Home</Link>
</Route>
</Router>
);
Route params
import { Router, Route, Link } from '@blockle/router';
import createHistory from 'history/createBrowserHistory';
render(
<Router history={createHistory}>
<Route
path="/detail/:id/:name"
render={(match, { id, name }) => {
match &&
<pre>
{id} - {name}
</pre>
}}
/>
</Router>
);
404
import { Router, Route, Link } from '@blockle/router';
import createHistory from 'history/createBrowserHistory';
render(
<Router history={createHistory}>
<Route path="/contact">
Contact
</Route>
<Route path="/about">
Contact
</Route>
<Route noMatch>
Route not found
</Route>
</Router>
);
RouteGroup
NOTE RouteGroup handle their own 404
import { Router, Route, Link } from '@blockle/router';
import createHistory from 'history/createBrowserHistory';
render(
<Router history={createHistory}>
<RouteGroup>
{/* Matches "/contact */}
<Route path="/contact">
Contact
</Route>
<Route path="/about">
Contact
</Route>
<Route noMatch>
Route not found
</Route>
</RouteGroup>
<RouteGroup baseUrl="/foo">
{/* Matches "/foo/contact */}
<Route path="/contact">
Contact
</Route>
<Route path="/about">
Contact
</Route>
<Route noMatch>
Route not found
</Route>
</RouteGroup>
</Router>
);
Link
to
string
replace
boolean
defaultfalse
className
string
activeClassName
string
default'is-active'
onClick
MouseEventHandler<HTMLAnchorElement>
import { Router, Link } from '@blockle/router';
import createHistory from 'history/createBrowserHistory';
render(
<Router>
<Link to="/foo">Link content</Link>
<Link to="/foo" replace>Link content</Link>
</Router>
);
3.1.0
2 years ago
3.0.1
3 years ago
3.0.0
3 years ago
3.0.0-alpha.1
3 years ago
2.1.2
3 years ago
2.1.1
3 years ago
2.1.0
3 years ago
2.0.1
3 years ago
2.0.0
3 years ago
2.0.0-alpha.3
4 years ago
2.0.0-alpha.2
5 years ago
2.0.0-alpha.1
5 years ago
2.0.0-alpha.0
5 years ago
1.2.2
5 years ago
1.2.0
5 years ago
1.1.0
5 years ago
1.0.0
5 years ago
1.0.0-alpha.4
5 years ago
1.0.0-alpha.3
5 years ago
1.0.0-alpha.2
5 years ago
1.0.0-alpha.1
5 years ago