---
id: docusaurus-core
title: Docusaurus Client API
sidebar_label: Client API
---
Docusaurus provides some API on client that can be helpful when building your site.
## `Head`
This reusable React component will manage all of your changes to the document head. It takes plain HTML tags and outputs plain HTML tags and is beginner-friendly. It is a wrapper around [React Helmet](https://github.com/nfl/react-helmet).
Usage Example:
```jsx {2,6,11}
import React from 'react';
import Head from '@docusaurus/Head';
const MySEO = () => (
<>
My Title
);
```
Nested or latter components will override duplicate usages:
```jsx {2,5,8,11}
My TitleNested Title
```
Outputs
```html
Nested Title
```
## `Link`
This component enables linking to internal pages as well as a powerful performance feature called preloading. Preloading is used to prefetch resources so that the resources are fetched by the time the user navigates with this component. We use an `IntersectionObserver` to fetch a low-priority request when the `` is in the viewport and then use an `onMouseOver` event to trigger a high-priority request when it is likely that a user will navigate to the requested resource.
The component is a wrapper around react-router’s `` component that adds useful enhancements specific to Docusaurus. All props are passed through to react-router’s `` component.
```jsx {2,7}
import React from 'react';
import Link from '@docusaurus/Link';
const Page = () => (
Check out my blog!
{/* Note that external links still use `a` tags. */}
Follow me on Twitter!
);
```
### `to`: string
The target location to navigate to. Example: `/docs/introduction`.
```jsx
```
### `activeClassName`: string
The class to give the `` when it is active. The default given class is `active`. This will be joined with the `className` prop.
```jsx {1}
FAQs
```
## `useDocusaurusContext`
React Hooks to access Docusaurus Context. Context contains `siteConfig` object from [docusaurus.config.js](docusaurus.config.js.md).
```ts
interface DocusaurusContext {
siteConfig?: DocusaurusConfig;
}
```
Usage example:
```jsx {2,5}
import React from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
const Test = () => {
const context = useDocusaurusContext();
const {siteConfig = {}} = context;
const {title} = siteConfig;
return
{title}
;
};
```
## `useBaseUrl`
React Hook to automatically append `baseUrl` to a string automatically. This is particularly useful if you don't want to hardcode your baseUrl.
Example usage:
```jsx {3,11}
import React, {useEffect} from 'react';
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
function Help() {
return (
Browse the docs
Learn more about Docusaurus using the{' '}
official documentation
);
}
```
## `Redirect`
Rendering a `` will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects (HTTP 3xx) do. You can refer to [React Router's Redirect documentation](https://reacttraining.com/react-router/web/api/Redirect) for more info on available props.
Example usage:
```jsx {2,5}
import React from 'react';
import {Redirect} from '@docusaurus/router';
function Home() {
return ;
}
```