react-router
是 React 应用中用于实现路由管理的库。它允许你在不同的 URL 路径下渲染不同的组件,从而实现单页应用(SPA)的导航。
/
在 react-router
中,如果你希望删除根路由中结尾的 /
,可以通过配置 BrowserRouter
或 HashRouter
来实现。
BrowserRouter
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Router>
);
}
function Home() {
return <h2>Home</h2>;
}
function About() {
return <h2>About</h2>;
}
function Contact() {
return <h2>Contact</h2>;
}
export default App;
在这个例子中,exact
属性确保了只有当路径完全匹配时,对应的组件才会被渲染。因此,访问 /
和 /home
都会渲染 Home
组件。
HashRouter
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Router>
);
}
function Home() {
return <h2>Home</h2>;
}
function About() {
return <h2>About</h2>;
}
function Contact() {
return <h2>Contact</h2>;
}
export default App;
/
?这通常是因为浏览器在访问根路径时,默认会添加一个 /
。例如,访问 http://example.com
实际上会被浏览器解析为 http://example.com/
。
exact
属性:如上所示,在 Route
组件中使用 exact
属性,确保只有当路径完全匹配时,对应的组件才会被渲染。/
。例如,在 Nginx 中可以配置:location / {
try_files $uri $uri/ /index.html;
rewrite ^/(.*)/$ /$1 permanent;
}
通过以上方法,你可以有效地删除根路由中结尾的 /
,并确保应用的路由管理更加清晰和灵活。
领取专属 10元无门槛券
手把手带您无忧上云