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
