[英]remove # from url react-router-dom in react js
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我是 react.js 的新手,我正在使用 react-router-dom v6,我正在研究一个主题,我发现 URL 中的 # 存在问题
Example:- {url}/#/dashboard示例:- {url}/#/dashboard
I want Example:- {url}/dashboard我想要示例:- {url}/dashboard
am assuming, you are using HashRouter if yes then please use BrowserRouter instead HashRouter我假设,如果是,您正在使用 HashRouter,那么请使用 BrowserRouter 而不是 HashRouter
implement BrowserRouter on routing在路由上实现 BrowserRouter
import { BrowserRouter,Route, Routes } from 'react-router-dom'
render(
<BrowserRouter>
<Routes>....</Routes>
</BrowserRouter>)
You have to use BrowserRouter
instead of HashRouter
from react-router-dom
您必须使用BrowserRouter
而不是来自react-router-dom
的HashRouter
In your App.js
file, try like below.在您的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;
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>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.