Leading Hashtag In A React Router Path

Viewed 2289

I'm refactoring an API front-end from jQuery to React and in order to keep the site backward-compatible, I have to keep the current URL formatting to match: www.site.com/#parameter, which has a leading hashtag in the pathname. The problem comes when trying to route the pathname to match this format, React Router doesn't recognize the route or render the corresponding components. When trying to console.log the useParams object, it returns undefined.

TLDR; How can I access a URL parameter that starts with a ‘#’?

import {Switch, Route} from "react-router-dom"
import Home from "./Home"


function Routes() {
  return (
    <div>
      <Switch>
        <Route exact path={`/#:parameter`}><Home/></Route>
      </Switch>
    </div>
  )

}

export default Routes;
1 Answers

Have your heard about HashRouter from React Router? It's main functionality is to replace BrowserRouter to handle legacy systems and the overall route looks like this:

www.your-great-website.com/#route-name

That might be what you're looking for or it will give you a starting point hopefully

Here's the official docs from the React Router team - HashRouter

Related