Skip to content

Commit

Permalink
Finish the FAQ.
Browse files Browse the repository at this point in the history
  • Loading branch information
molefrog committed Jan 31, 2024
1 parent 912f467 commit 0bacc05
Showing 1 changed file with 8 additions and 25 deletions.
33 changes: 8 additions & 25 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -664,36 +664,19 @@ const App = () => (

### Are relative routes and links supported?

Unlike [React Router](https://reach.tech/router/nesting), there is no first-class support for route
nesting. However, thanks to the
[base path support](#i-deploy-my-app-to-the-subfolder-can-i-specify-a-base-path), you can easily
implement a nesting router yourself!
Yes! Any route with `nest` prop present creates a nesting context. Keep in mind, that the location inside a nested route will be scoped.

```js
const NestedRoutes = (props) => {
const router = useRouter();
const [parentLocation] = useLocation();

const nestedBase = `${router.base}${props.base}`;

// don't render anything outside of the scope
if (!parentLocation.startsWith(nestedBase)) return null;

// we need key to make sure the router will remount when base changed
return (
<Router base={nestedBase} key={nestedBase}>
{props.children}
</Router>
);
};

const App = () => (
<Router base="/app">
<NestedRoutes base="/dashboard">
{/* the real url is /app/dashboard/users */}
<Route path="/dashboard" nest>
{/* the href is "/app/dashboard/users" */}
<Link to="/users" />
<Route path="/users" />
</NestedRoutes>

<Route path="/users">
{/* Here `useLocation()` returns "/users"! */}
</Route>
</Route>
</Router>
);
```
Expand Down

0 comments on commit 0bacc05

Please sign in to comment.