简述React-Router的路由有⼏种模式 ?
React Router 主要有两种模式:BrowserRouter
和 HashRouter
。
- BrowserRouter: 这是React Router的默认模式。在这种模式下,URL的路径部分对应于你的React组件的视图层次。例如,访问
/about
会渲染About
组件。这种模式依赖于HTML5的history API(pushState, replaceState 和 popstate 事件)。这种模式的一个缺点是,如果你的服务器没有被正确配置,用户直接访问子路由(例如/about
)可能会看到404页面。 -
HashRouter: 这个模式用URL的哈希(#)部分来保持UI和URL同步。因为哈希部分的改变不会触发服务器请求,所以这种模式可以用在不能或不想配置服务器来响应各种URL的情况下。例如,访问
/#/about
会渲染About
组件。在这种模式下,用户可以直接访问子路由而不会看到404页面。
以下是这两种模式的使用例子:
// BrowserRouter
import { BrowserRouter as Router, Route } from 'react-router-dom';
<Router>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Router>
// HashRouter
import { HashRouter as Router, Route } from 'react-router-dom';
<Router>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Router>
在选择使用哪种模式时,你需要根据你的应用和服务器的配置来决定。如果你不确定,那么 BrowserRouter
是个好的开始。