diff --git a/.changeset/khaki-beers-admire.md b/.changeset/khaki-beers-admire.md new file mode 100644 index 0000000000..b091900dce --- /dev/null +++ b/.changeset/khaki-beers-admire.md @@ -0,0 +1,6 @@ +--- +"react-router": patch +"react-router-dom": patch +--- + +HashRouter hashType implementation for backwards compatibility with project migrating from React-Router v4/v5 diff --git a/contributors.yml b/contributors.yml index 182253523a..d8cc826f90 100644 --- a/contributors.yml +++ b/contributors.yml @@ -285,3 +285,4 @@ - yuleicul - zeromask1337 - zheng-chuang +- Whaileee diff --git a/docs/router-components/hash-router.md b/docs/router-components/hash-router.md new file mode 100644 index 0000000000..11e74df495 --- /dev/null +++ b/docs/router-components/hash-router.md @@ -0,0 +1,94 @@ +--- +title: HashRouter +--- + +# `` + +
+ Type declaration + +```tsx +declare function HashRouter( + props: HashRouterProps +): React.ReactElement; + +interface HashRouterProps { + basename?: string; + hashType?: HashType + children?: React.ReactNode; + future?: FutureConfig; + window?: Window; +} +``` + +
+ +`` is for use in web browsers when the URL should not (or cannot) be sent to the server for some reason. This may happen in some shared hosting scenarios where you do not have full control over the server. In these situations, `` makes it possible to store the current location in the `hash` portion of the current URL, so it is never sent to the server. + +```tsx +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { HashRouter } from "react-router-dom"; + +ReactDOM.render( + + {/* The rest of your app goes here */} + , + root +); +``` + +We strongly recommend you do not use `HashRouter` unless you absolutely have to. + +## `basename` + +Configure your application to run underneath a specific basename in the URL: + +```jsx +function App() { + return ( + + + {/* 👈 Renders at /#/app/ */} + + + ); +} +``` + +## `hashType` + +Decide wether to put a slash after the '#' in the URL (default: 'slash') + +```jsx +function App() { + return ( + + + {/* 👈 Renders at /#bookmark/ */} + + + ); +} +``` + +## `future` + +An optional set of [Future Flags][api-development-strategy] to enable. We recommend opting into newly released future flags sooner rather than later to ease your eventual migration to v7. + +```jsx +function App() { + return ( + + {/*...*/} + + ); +} +``` + +## `window` + +`HashRouter` defaults to using the current [document's `defaultView`][defaultview], but it may also be used to track changes to another window's URL, in an `