https://github.com/penx/nested-browser-router
Nest a ReactRouter BrowserRouter
https://github.com/penx/nested-browser-router
Last synced: 5 months ago
JSON representation
Nest a ReactRouter BrowserRouter
- Host: GitHub
- URL: https://github.com/penx/nested-browser-router
- Owner: penx
- Created: 2018-11-07T09:13:04.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-11-07T12:10:50.000Z (about 7 years ago)
- Last Synced: 2025-02-13T17:51:57.959Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 220 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Nested Browser router
A Nested Browser Router that can be used with React Router, when you want to set a basename on a sub router.
## Usage
`npm install nested-browser-router`
```jsx
import { BrowserRouter } from 'react-router-dom';
import NestedBrowserRouter from 'nested-browser-router';
function App() {
return
...
...
}
```
## Why?
React Router [doesn't support nesting BrowserRouter](https://github.com/ReactTraining/react-router/issues/5291#issuecomment-311720082), but sometimes you need to set a basename for a subsection of your application.
e.g. so that React Router applications can be distributed as modules and live within parent applications that also use React Router
### Working example
```jsx
function App() {
return (
Application
Home | Sub app |{" "}
Sub sub
Home
} />
(
<>
Sub app
Sub Home | Sub Sub
Sub Home
} />
Sub Sub
} />
>
)}
/>
);
}
```
https://codesandbox.io/s/q4l9vo1m89
### Equivalent broken example with BrowserRouter
The following does not work with React Router - try clicking Home and Sub in the two nav bars:
```jsx
function App() {
return (
Application
Try clicking between sub app and sub sub and note that sub app below
does not update.{" "}
Fixed with NestedBrowserRouter here
.
Home | Sub app |{" "}
Sub sub
Home
} />
(
<>
Sub app
Sub Home | Sub Sub
Sub Home
} />
Sub Sub
} />
>
)}
/>
);
}
```
https://codesandbox.io/s/04plqpol5l
## Caveats
- This requires React Router @4.4 which is still in beta
- I've only proven a basic use case here, would be interested in feedback and to hear if this works for all use cases. We are planning to use this in production on a large scale, modularised React application that lives across multiple repositories.
- I'm not yet sure how to link from the sub app/router back up to the parent app/router