$ npm i toy-react-router
or
$ yarn add toy-react-router
- Demo
- Quick Start
import React from "react";
import { Router, Route, Link, Switch } from "toy-react-router";
const App = () => {
return (
<Router>
<Switch>
<Route path="/" exact>
This is MainPage
<Link to="/1">to page 1</Link>
</Route>
<Route path="/1">
This is Page 1
<Link to="/2">to page 2</Link>
</Route>
<Route path="/2">
This is Page 2
<Link to="/">to mainpage</Link>
</Route>
<Route> No Match </Route>
</Switch>
</Router>
);
};
export default App;
- Component
- Router : The common low-level interface for all router components.
- Route : Render when its path matches the current URL.
- path: string
- exact: boolean
- When true, will only match if the path matches the
location.pathname
exactly.
- When true, will only match if the path matches the
- Switch : Renders the first child
<Route>
that matches the location. - Link : Acts similar to
<a>
tag without refresh.- to: string
- Redirect : Rendering a will navigate to a new location.
- to: string
- This library get inspired by react-router-dom and just clone it
- All components in thie library implemented by me, so many features acts be inferior to origin react-router, such as overlapping
<Route>
component
- Component
- Switch
- Redirect
- feature
- exact path in Route
- path="*" in Route
- Hook
- useParams
- useHistory
- Guide
- add how to use components
- add some GIF of each component demo
- Apply TypeScript
- convert Router.jsx to Router.tsx
- npm publish with TypeScript