React Router Snippets (v6) (Visual Studio Code)
Snippets
Import
Prefix |
Description |
Body |
"imbr", "importBrowserRouter" |
import { BrowserRouter as Router } from 'react-router-dom' |
import Router <BrowserRouter> |
"imhr", "importHashRouter" |
import { HashRouter as Router } from 'react-router-dom' |
import Router <HashRouter> |
"imsr", "importStaticRouter" |
import { StaticRouter as Router } from 'react-router-dom/server' |
import Router <StaticRouter> |
"imnr", "importNativeRouter" |
import { NativeRouter } from 'react-router-dom' |
import Router <NativeRouter> |
"immr", "importMemoryRouter" |
import { MemoryRouter } from 'react-router-dom' |
import Router <MemoryRouter> |
"imhr", "HistoryRouter" |
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom' |
import Router <HistoryRouter> |
"imrl", "importLink" |
import { Link } from 'react-router-dom' |
import Router <Link> |
"imrl", "importLink" |
import { Link } from 'react-router-native' |
import Router <Link> (React Native) |
"imrn" |
import { Navigate } from 'react-router-dom' |
import Router <Navigate> |
"imrnl", "importNavLink" |
import { NavLink } from 'react-router-dom' |
import Router <NavLink> |
"imro" |
import { Outlet } from 'react-router-dom' |
import Router <Outlet> |
"imrr" |
import { Routes, Route } from 'react-router-dom' |
import Router <Routes>, |
"imrcsp" |
import { createSearchParams } from 'react-router-dom' |
import Router createSearchParams |
"imrmp" |
import { matchPath } from 'react-router' |
import matchPath |
"imgp" |
import { generatePath } from 'react-router' |
import Router generatePath |
"imruh" |
import { useHref } from 'react-router-dom' |
import Router useHref |
"imruirc" |
import { useInRouterContext } from 'react-router-dom' |
import Router useInRouterContext |
"imrulch" |
import { useLinkClickHandler } from 'react-router-dom' |
import Router useLinkClickHandler |
"imrulph" |
import { useLinkPressHandler } from 'react-router-native' |
import Router useLinkPressHandler |
"imrul" |
import { useLocation } from 'react-router-dom' |
import Router useLocation |
"imrum" |
import { useMatch } from 'react-router-dom' |
import Router useMatch |
"imrun" |
import { useNavigate } from 'react-router-dom' |
import Router useNavigate |
"imrunt" |
import { useNavigationType } from 'react-router-dom' |
import Router useNavigationType |
"imruo" |
import { useOutlet } from 'react-router-dom' |
import Router useOutlet |
"imruoc" |
import { useOutletContext } from 'react-router-dom' |
import Router useOutletContext |
"imrup" |
import { useParams } from 'react-router-dom' |
import Router useParams |
"imrurp" |
import { useResolvedPath } from 'react-router-dom' |
import Router useResolvedPath |
"imur" |
import { useRoutes } from 'react-router-dom' |
import Router useRoutes |
"imusp" |
import { useSearchParams } from 'react-router-dom' |
import Router useSearchParams |
"imusp" |
import { useSearchParams } from 'react-router-native' |
import Router useSearchParams (React Native) |
Hooks
useHref
→ const href = useHref()
useInRouterContext
→ const inRouterContext = useInRouterContext()
useLinkClickHandler
→ const handleClick = useLinkClickHandler(to, options)
useLinkPressHandler
→ const handlePress = useLinkPressHandler(to, options)
useLocation
→ const location = useLocation()
useMatch
→ const pathMatch = useMatch()
useNavigate
→ const navigate = useNavigate()
useNavigationType
→ const navigationType = useNavigationType()
useOutlet
→ const outlet = useOutlet()
useOutletContext
→ const [state, setstate] = useOutletContext()
useParams
→ const { param } = useParams()
useResolvedPath
→ const resolvedPath = useResolvedPath()
useRoutes
→
let routes = useRoutes([
{
path: '/',
element: <Dashboard />,
children: [
{ path: 'messages', element: <DashboardMessages /> },
{ path: 'tasks', element: <DashboardTasks /> },
],
},
{ path: 'team', element: <AboutPage /> },
])
return routes
useSearchParams
→
const [searchParams, setSearchParams] = useSearchParams()
function handleSubmit(event) {
event.preventDefault()
const params = serializeFormQuery(event.target)
setSearchParams(params)
}
routing
rr
/Router
, React Router (BrowserRouter, HashRouter) →
<Router basename="/path">
<App />
</Router>
rr
/HistoryRouter
, React HistoryRouter →
<HistoryRouter history={history}>
<App />
</HistoryRouter>
StaticRouter
→
<StaticRouter location="/path">
<App />
</StaticRouter>
Routes
→
<Routes>
<Route path="/" element={<Home />} />
<Route path="Home" element={<FeatureComponent />} />
</Routes>
Route
→
<Route path="path" element={<path />} />
matchPath
→
const match = matchPath('/users/1', {
path: '/users/:id',
end: true,
caseSensitive: false,
})
Navigation
rl
/Link
, Router <Link> →
<Link to="path">{Text}</Link>
rnl
/NavLink
, Router <NavLink> →
<NavLink to="/path">
Text
</NavLink>
Navigate
→
<Navigate to="/path" replace={true} />
Outlet
→
<Outlet />
Chore
createSearchParams
→
const { searchParams } = createSearchParams()
generatePath
→
const path = generatePath('/user/:id/:entity(posts|comments)', {
id: 1,
entity: 'posts'
})
location
→
const location = {
key: 'Key',
pathname: '/path
search: '?q=query-string',
hash: '#fragment',
state: {}
}
Version
The major corresponds to the official generation.
React Router 5: branch: v5 (5.0.*)
License
MIT License