從反應js中的url react-router-dom中刪除＃

Question

我是 react.js 的新手，我正在使用 react-router-dom v6，我正在研究一個主題，我發現 URL 中的 # 存在問題

示例：- {url}/#/dashboard

我想要示例：- {url}/dashboard

Answer 1

我假設，如果是，您正在使用 HashRouter，那么請使用 BrowserRouter 而不是 HashRouter

在路由上實現 BrowserRouter

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

Answer 2

您必須使用BrowserRouter而不是來自react-router-dom的HashRouter

在您的App.js文件中，嘗試如下所示。

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;

Answer 3

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>
  );
}