@canlooks/react-router
v0.0.11
Published
React router manager
Downloads
113
Readme
@canlooks/react-router
This is a simple route manager based on my habits.
Installation
npm i @canlooks/react-router
Usage
import {Router, RouteItem, Routes} from '@canlooks/react-router'
const routes: RouteItem[] = [
{path: '/', element: <Home />},
{path: '/about', element: <About />},
{path: '/user', element: <User />, children: [
{path: ':id', element: <UserInfo />}
]}
]
function App() {
return (
<Router>
<Routes routes={routes}>
</Router>
)
}
or "JSX" style syntax
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/user" element={<User />}>
<Route path=":id" element={<UserInfo />} />
</Route>
</Routes>
</Router>
)
}
API
Router
- mode "history" | "hash" | "memory", default "history"
- base string
Routes
- routes Route[]
Route
- path string
- element ReactNode
- children Route[]
Outlet
Insert matched child route element into the parent component.
function User() {
return (
<>
{/* This is matched child route element, such as <UserInfo /> as in the case above,*/}
<Outlet />
</>
)
}
useQuery()
Get search params from the URL. It will returns a URLSearchParams
object.
useParams()
Get dynamic path from the URL. Such as :id
in the path /user/:id
.