# React Router API Reference React Router is a collection of [React components](https://reactjs.org/docs/components-and-props.html), [hooks](#https://reactjs.org/docs/hooks-intro.html) and utilities that make it easy to build multi-page applications with [React](https://reactjs.org). This reference contains the function signatures and return types of the various interfaces in React Router. > **Tip:** > > Please refer to [our guides](./advanced-guides) for more in-depth usage > examples of how you can use React Router to accomplish specific tasks. ## Overview ### Packages React Router is published to npm in three different packages: - [`react-router`](https://npm.im/react-router) contains most of the core functionality of React Router including the route matching algorithm and most of the core components and hooks - [`react-router-dom`](https://npm.im/react-router-dom) includes everything from `react-router` and adds a few DOM-specific APIs like [``](#browserrouter), [``](#hashrouter), [``](#link), etc. - [`react-router-native`](https://npm.im/react-router-native) includes everything from `react-router` and adds a few APIs that are specific to React Native including [``](#nativerouter) and [a native version of ``](#link-native) Both `react-router-dom` and `react-router-native` automatically include `react-router` as a dependency when you install them, and both packages re-export everything from `react-router`. **When you `import` stuff, you should always import from either `react-router-dom` or `react-router-native` and never directly from `react-router`**. Otherwise you may accidentally import mismatched versions of the library in your app. If you [installed](./installation) React Router as a global (using a `` tag), you can find the library on the `window.ReactRouterDOM` object. If you installed it from npm, you can simply [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) the pieces you need. The examples in this reference all use `import` syntax. ### Setup To get React Router working in your app, you need to render a router element at or near the root of your element tree. We provide several different routers, depending on where you're running your app. - [``](#browserrouter) or [``](#hashrouter) should be used when running in a web browser. Which one you pick depends on the style of URL you prefer or need. - [``](#staticrouter) should be used when server-rendering a website - [``](#nativerouter) should be used in [React Native](https://reactnative.dev/) apps - [``](#memoryrouter) is useful in testing scenarios and as a reference implementation for the other routers These routers provide the context that React Router needs to operate in a particular environment. Each one renders [a ``](#router) internally, which you may also do if you need more fine-grained control for some reason. But it is highly likely that one of the built-in routers is what you need. ### Routing Routing is the process of deciding which React elements will be rendered on a given page of your app, and how they will be nested. React Router provides two interfaces for declaring your routes. - [`` and ``](#routes-and-route) if you're using JSX - [`useRoutes`](#useroutes) if you'd prefer a JavaScript object-based config A few low-level pieces that we use internally are also exposed as public API, in case you need to build your own higher-level interfaces for some reason. - [`matchPath`](#matchpath) - matches a path pattern against a URL pathname - [`matchRoutes`](#matchroutes) - matches a set of routes against a [location](#location) - [`createRoutesFromArray`](#createroutesfromarray) - creates a route config from a set of plain JavaScript objects - [`createRoutesFromChildren`](#createroutesfromchildren) - creates a route config from a set of React elements (i.e. [``](#route) elements) ### Navigation React Router's navigation interfaces let you change the currently rendered page by modifying the current [location](#location). There are two main interfaces for navigating between pages in your app, depending on what you need. - [``](#link) and [``](#navlink) render an accessible `` element, or a `TouchableHighlight` on React Native. This lets the user initiate navigation by clicking or tapping an element on the page. - [`useNavigate`](#usenavigate) and [``](#navigate) let you programmatically navigate, usually in an event handler or in response to some change in state There are a few low-level APIs that we use internally that may also prove useful when building your own navigation interfaces. - [`useResolvedPath`](#useresolvedpath) - resolves a relative path against the current [location](#location) - [`useHref`](#usehref) - resolves a relative path suitable for use as a `` - [`useLinkClickHandler`](#uselinkclickhandler) - returns an event handler to for navigation when building a custom `` in `react-router-dom` - [`useLinkPressHandler`](#uselinkpresshandler) - returns an event handler to for navigation when building a custom `` in `react-router-native` - [`resolvePath`](#resolvepath) - resolves a relative path against a given URL pathname ### Confirming Navigation Sometimes you need to confirm navigation before it actually happens. For example, if the user has entered some data into a form on the current page, you may want to prompt them to save the data before they navigate to a different page. - [`usePrompt`](#useprompt) and [``](#prompt) trigger a platform-native confirmation prompt when the user tries to navigate away from the current page - [`useBlocker`](#useblocker) is a low-level interface that lets you keep the user on the same page and execute a function that will be called when they try to navigate away ### Search Parameters Access to the URL [search parameters](https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams) is provided via [the `useSearchParams` hook](#usesearchparams). --- ## Reference ### ``

Type declaration

```tsx declare function BrowserRouter(props: BrowserRouterProps): React.ReactElement; interface BrowserRouterProps { basename?: string; children?: React.ReactNode; window?: Window; } ```

`` is the recommended interface for running React Router in a web browser. A `` stores the current location in the browser's address bar using clean URLs and navigates using the browser's built-in history stack. `` defaults to using the current [document's `defaultView`](https://developer.mozilla.org/en-US/docs/Web/API/Document/defaultView), but it may also be used to track changes to another's window's URL, in an `