简述React-Router的路由有⼏种模式 ?

React Router 主要有两种模式:BrowserRouterHashRouter

  1. BrowserRouter: 这是React Router的默认模式。在这种模式下,URL的路径部分对应于你的React组件的视图层次。例如,访问 /about 会渲染 About 组件。这种模式依赖于HTML5的history API(pushState, replaceState 和 popstate 事件)。这种模式的一个缺点是,如果你的服务器没有被正确配置,用户直接访问子路由(例如 /about)可能会看到404页面。

  2. 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 是个好的开始。

发表评论

后才能评论