remove # from url react-router-dom in react js-CodePudding

I am new in react.js I am using react-router-dom v6 and I working on a theme where I find an issue with # in URL

Example:- {url}/#/dashboard

I want Example:- {url}/dashboard

CodePudding user response：

am assuming, you are using HashRouter if yes then please use BrowserRouter instead HashRouter

implement BrowserRouter on routing

import { BrowserRouter,Route, Routes } from 'react-router-dom'
render(
<BrowserRouter>
<Routes>....</Routes>
</BrowserRouter>)

CodePudding user response：

You have to use BrowserRouter instead of HashRouter from react-router-dom

In your App.js file, try like below.

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import LandingPage from './Containers/LandingPage';

const App = () => {
  return (
    <BrowserRouter className='App'>
      <Routes>
        <Route exact path='/' element={<LandingPage />} />
      </Routes>
      <Routes>
        <Route ... ... />
      </Routes>
      ... ...
    </BrowserRouter>
  );
}

export default App;

CodePudding user response：

I think you have to use BrowserRouter instead of HashRouter

1. You can add it in your index.js or index.tsx depending on your project.

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

root.render(
<BrowserRouter>
<App/>
</BrowserRouter>)

2. You can also add in your App.js or App.tsx depending 

import { BrowserRouter,Routes,Route } from 'react-router-dom'

const App = () => {
  return (
    <BrowserRouter className='main'>
      <Routes>
        <Route exact path='/' element={<Home />} />
      </Routes>
      <Routes>
      </Routes>
    </BrowserRouter>
  );
}