th12router v1.0.3
Simple React Router
You can use this router for both React web applications and React Native.
Warning: If your npm version not supported peerDependencies. You should install th12storage. "npm install th12storage".
Getting Started
Simple example (React Web).
import { Router, Link, useParams, usePath } from "th12router";
// Main component
function Home(){
return <div>
Home
</div>;
}
function App() {
// Description of routes
let routes = [
{"path": "/", "component": Home, "private": null}
];
// Return JSX
return (
<div className="App">
<Router routes={routes} />
</div>
);
}
export default App;
Documentation
Imports:
- Router;
- Link;
- useParams;
- usePath.
Router
This is the main component. It loads all router components.
<Router routes={routes} />
Router use routes array.
let routes = [
{"path": "/pagenotfound", "component": PageNotFound, "private": null},
{"path": "/", "component": Home, "private": null},
{"path": "/user/:id&^[0-9]+", "component": User, "private": true},
{"path": "/lazy", "component": Lazy, "private": null}
];
path - This is the path by which you need to download the router. You can use params and regular expressions. For example: /user/:id&^0-9+ A colon indicates that a parameter is used. An Ampersand indicates that a regular expressions is used.
component - The component to be downloaded.
private - The parameter that tells whether to load the component during authorization or not. If null is specified, the component is loaded in any case.
Link
This is an interface for interacting with the router.
<Link
to="/"
style={{"color": "red"}}
astyle={{"color": "green"}}
timer="1000"
title=""
pstate
>To Home</Link>
Description:
- to(path);
- style(css style);
- astyle(css style active link "onMouseDown event");
- timer(delay activet link after mousedown);
- title(browser title if set pstate);
- pstate(history push state).
useParams
If you use parameters in a router, you can load the parameters into a component.
let params = useParams();
console.log(params["id"]);
usePath
A hook to get the current path.
let path = usePath();
console.log(path);
Additional Information
Lazy components
If you want to load lazy components. You need to use the React.Suspense component.
const Lazy = React.lazy(() => import("./Lazy.jsx"))
let routes = [
{"path": "/pagenotfound", "component": PageNotFound, "private": null},
{"path": "/", "component": Home, "private": null},
{"path": "/user/:id&^[0-9]+", "component": User, "private": true},
{"path": "/lazy", "component": Lazy, "private": null}
];
<React.Suspense fallback={<React.Fragment>...</React.Fragment>}>
<Router routes={routes} />
</React.Suspense>
Initialization
import { useStorage } from "th12storage";
// Initial path if need
useStorage("routerPage", window.location.pathname);
// App auth if need
useStorage("routerAuth", true);
Full React Web example
import React from "react";
import { Router, Link, useParams, usePath } from "th12router";
import { useStorage } from "th12storage";
// Page Not Found component
function PageNotFound(){
let path = usePath();
return <div>
Page not found({path})!
<Link to="/" style={{"color": "red"}} pstate>To Home</Link>
</div>;
}
// Main component
function Home(){
return <div>
Home
<Link astyle={{"color":"green"}} to="/user/1" title="About us" pstate>Profile</Link>
<Link to="/lazy" pstate>To Lazy</Link>
</div>;
}
// Componenet with params and regular expresion. /user/:id&^[0-9]+
// And component with bad path. Waiting for Page Not Found component to load.
function User(){
let params = useParams();
return <div>
User {params["id"]}!
<Link to="/otherway" pstate>To Home</Link>
</div>;
}
export default function App() {
// Lazy load component
const Lazy = React.lazy(() => import("./Lazy.jsx"))
let routes = [
{"path": "/pagenotfound", "component": PageNotFound, "private": null},
{"path": "/", "component": Home, "private": null},
{"path": "/user/:id&^[0-9]+", "component": User, "private": true},
{"path": "/lazy", "component": Lazy, "private": null}
];
useStorage("routerPage", window.location.pathname);
useStorage("routerAuth", true);
return (
<div className="App">
<React.Suspense fallback={<React.Fragment>...</React.Fragment>}>
<Router routes={routes} />
</React.Suspense>
</div>
);
}
Full React Native example
import React from "react";
import { StyleSheet, Text, View, SafeAreaView, StatusBar } from 'react-native';
import { Router, Link, useParams, usePath } from "th12router";
import { useStorage } from "th12storage";
// Page Not Found component
function PageNotFound(){
let path = usePath();
return <Text>
Page not found({path})!
<Link to="/" style={{"color": "red"}}>To Home</Link>
</Text>;
}
// Main component
function Home(){
return <Text>
Home
<Link astyle={{"color":"green"}} to="/user/1" title="About us" pstate>Profile</Link>
</Text>;
}
// Componenet with params and regular expresion. /user/:id&^[0-9]+
// And component with bad path. Waiting for Page Not Found component to load.
function User(){
let params = useParams();
return <Text>
User {params["id"]}!
<Link to="/otherway">To Home</Link>
</Text>;
}
export default function App() {
let routes = [
{"path": "/pagenotfound", "component": PageNotFound, "private": null},
{"path": "/", "component": Home, "private": null},
{"path": "/user/:id&^[0-9]+", "component": User, "private": true}
];
useStorage("routerPage", "/");
useStorage("routerAuth", true);
return (
<SafeAreaView style={styles.safe}>
<View style={styles.container}>
<Router routes={routes} />
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
safe: {
flex: 1,
marginTop: StatusBar.currentHeight
},
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
}
});