zreact-router
v0.3.3
Published
a simple router support react,preact,zreact.
Downloads
20
Readme
zreact-router
a simple router support react, preact, zreact.
copy from preact-router
add support
- animate support(preact-animate)
import Animate from "preact-animate";
import { Route, DRouter } from "zreact-router";
function RootRouter() {
return <DRouter>
<Link href="/">Home</Link><br/>
<Link href="/test">Test</Link><br/>
<Animate
component="div"
componentProps={{className: "main"}}
>
<Route
key="1"
component={() => <div className="animated">Home</div>}
path="/"
transitionName={{ enter: "fadeInLeft", leave: "fadeOutLeft" }}
></Route>
<Route
key="1"
component={() => <div className="animated">Test</div>}
path="/test"
transitionName={{ enter: "fadeInRight", leave: "fadeOutRight" }}
></Route>
</Animate>
</DRouter>;
}
Router
children not support other tag
import { Router, Link } from "zreact-router";
function RootRouter() {
const Home = () => <h1>Home</h1>;
const Test = () => <h1>Test</h1>
return <div>
<Link href="/">Home</Link><br/>
<Link href="/test">Test</Link><br/>
<Router>
<Home
key="1"
path="/"
/>
<Test
key="1"
path="/test"
></Route>
</Router>
</div>;
}
- hash router support
import { Router, Link, LocationProvider, createHashSource, createHistory } from "zreact-router";
const source = createHashSource();
const history = createHistory(source, {mode: "hash"});
function RootRouter() {
const Home = () => <h1>Home</h1>;
const Test = () => <h1>Test</h1>
return <LocationProvider history={history}>
<div>
<Link href="/">Home</Link><br/>
<Link href="/test">Test</Link><br/>
<Router>
<Home
key="1"
path="/"
/>
<Test
key="1"
path="/test"
></Route>
</Router>
</div>
</LocationProvider>;
}
- delete global
navigate
export
import { globalHistory, createHashSource, createHistory } from "zreact-router";
// global `navigate`
const { navigate } = globalHistory;
// other global `navigate`
const hashHistory = createHistory(createHashSource());
const { navigate } = hashHistory
Link
supporthref
replace
import { Link } from "zreact-router";
const HomeLink = <Link href="/">Home</Link>;
// href be equal to
const HomeLink = <Link to="/">Home</Link>;
Route
path params not assignprops
set onprops.params
import { Router, Link } from "zreact-router";
function RootRouter() {
const Home = () => <h1>Home</h1>;
const Test = (props) => <h1>{"Test: " + JSON.stringify(props.params)}</h1>
return <div>
<Link href="/">Home</Link><br/>
<Link href="/test/hhhh">Test</Link><br/>
<Router>
<Home
key="1"
path="/"
/>
<Test
key="1"
path="/test/:id"
></Route>
</Router>
</div>;
}
- add
location.searchParams
import { Router, Link } from "zreact-router";
function RootRouter() {
const Home = () => <h1>Home</h1>;
const Test = (props) => <h1>{"Test: " + props.location.searchParams.get("test")}</h1>
return <div>
<Link href="/">Home</Link><br/>
<Link href="/test?test=gggg">Test</Link><br/>
<Router>
<Home
key="1"
path="/"
/>
<Test
key="1"
path="/test"
></Route>
</Router>
</div>;
}