zreact-router

a simple router support react, preact, zreact.

copy from preact-router

add support

1. 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>;
}

1. 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>;
}

1. 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

1. Link support href replace

import { Link } from "zreact-router";
 
const HomeLink = <Link href="/">Home</Link>;
// href be equal to
const HomeLink = <Link to="/">Home</Link>;

1. Route path params not assign props set on props.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>;
}

1. 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>;
}