Redirect all url with # from HashRouter to BrowserRouter

Question

I changed HashRouter to BrowserRouter and now I would like to redirect all urls to remove # from them. (Url are in e.g. mailing - so I have to do it).

I found a similar topic to this, but none of the solutions there works for me.

import { BrowserRouter } from 'react-router-dom'

class Index extends Component {

    render() {

        return (
<BrowserRouter>
  <Switch>
    <Route exact path={"/"} component={() => <HomePage />}/>
    <Redirect from='/#/bus/:category' to '/bus/:category' />
    <Route exact path='/bus/:category' component={BusCategory} />
  </Switch>
</BrowserRouter>
        )
    }
}

ReactDOM.render(<Index />, document.getElementById("index"));

It's redirecting only to HomePage.

Next solution also not working:

import { BrowserRouter } from 'react-router-dom'

class Index extends Component {

    render() {


 const history = useHistory()

  if (location.hash.startsWith('#/')) {
    history.push(location.hash.replace('#', '')) // or history.replace
  }

        return (
<BrowserRouter>
  <Switch>
    <Route exact path={"/"} component={() => <HomePage />}/>
    <Route exact path='/bus/:category' component={BusCategory} />
  </Switch>
</BrowserRouter>
        )
    }
}

ReactDOM.render(<Index />, document.getElementById("index"));

and the last one also nothning :(

import { BrowserRouter } from 'react-router-dom'

class Index extends Component {

    render() {

        return (
<BrowserRouter>
  <Switch>
    <Route exact path={"/"} component={() => <HomePage />}/>
    <Route exact path='/bus/:category' component={BusCategory} />
    <Route path={"/bus/:category"} render={({ location }) => <Redirect strict to={location.hash.replace('#', '')} />} />

  </Switch>
</BrowserRouter>
        )
    }
}

ReactDOM.render(<Index />, document.getElementById("index"));

I've probably already tried all the options, if anyone can help me I'll be extremely grateful.

// EDIT

now everything works, except the HomePage...

import { BrowserRouter } from 'react-router-dom'

class Index extends Component {

    render() {

        return (
<BrowserRouter>
  <Switch>
 <Route path={"/bus/:category"} render={({ location }) => <Redirect strict to={location.hash.replace('#', '')} />} />
    <Route exact path={"/"} component={() => <HomePage />}/>
    <Route exact path='/bus/:category' component={BusCategory} />

  </Switch>
</BrowserRouter>
        )
    }
}

ReactDOM.render(<Index />, document.getElementById("index"));

Answer 1

You can use something like

import React, { useEffect } from 'react'
import { BrowserRouter, Route, useHistory, useLocation } from 'react-router-dom'

const Index = () => {
  const history = useHistory()
  const location = useLocation()
  useEffect(() => {
    if (location.hash) {
      history.replace(location.hash.replace('#', ''))
    }
  }, [history, location.hash, location.pathname])
  return (
    <>
      <Route exact path={'/'} render={() => <h1>Home</h1>} />
      <Route
        exact
        path="/bus/:category"
        render={({ match: { params } }) => <div>{params.category}</div>}
      />
    </>
  )
}

export default () => (
  <BrowserRouter>
    <Index />
  </BrowserRouter>
)

Your previous code didn't work because <Index /> component was not the child of BrowserRouter component, because of which the location, as well as history, would be undefined.

Now if you try to visit localhost:3000/#/bus/car it would redirect to localhost:3000/bus/car.

Answer 2

Two points:

1. Why do you have to do a redirect at all? If I understand you correctly, you only used the BrowserRouter instead of the HashRouter. Exchanged, so to speak. This automatically eliminates the # and the pages "/#/bus/:category" simply no longer exist.

2. Is the line <Redirect from='/#/bus/:category' to '/bus/category' /> really correct? When I read this, it looks to me like you are referring to the URL "/bus/category". But actually you want something like "/bus/cars".