Eine kurze Diskussion zur Verwendung von React-Router HashRouter und BrowserRouter

Dieser Artikel stellt hauptsächlich die Verwendung von React-Router HashRouter und BrowserRouter vor. Es hat einen gewissen Referenzwert. Ich hoffe, es kann jedem helfen.

Die offizielle Website empfiehlt BrowserRouter, aber diese Methode erfordert die Mitarbeit des Servers, und der Nachteil besteht darin, dass die Umleitung nur zur Startseite gehen kann und nicht auf der aktuellen Seite bleiben kann. Die spezifische Verwendung ist sehr einfach. Hier ist ein Beispiel.

HashRouter

//react-router要求只只有一个字节点
//router内部的Link和Route会一一匹配，匹配到则加载对应的组件
//to 和 Route 的path是一样的（除了/结尾）
//比如点击关于我们to="/aboutUs"对应path="/aboutUs/"，这样它就去加载AboutUs这个组件，其他组件没加载
//相比用state和回调实现，这种方式更为简单明了，而且浏览前进后退功能都支持
<HashRouter>
  <p id="wrapper">
    <Header />
    <ul className="nav navbar-nav">
      <li><Link to="/">首页</Link></li>
      <li><Link to="/classifiedDisplay">分类展示</Link></li>
      <li><Link to="/boutiqueCase">精品案例</Link></li>
      <li><Link to="/aboutUs">关于我们</Link></li>
    </ul>
    <Route exact path="/" component={Home}/>
    <Route exact path="/classifiedDisplay/" component={TypeShow}/>
    <Route exact path="/boutiqueCase/" component={JpShow}/>
    <Route exact path="/aboutUs/" component={AboutUs}/>
    <Footer />
  </p>
</HashRouter>

BrowserRouter

Frontend

Wie der obige Code, außer dass der HashRouter durch die BrowserRouter-Komponente ersetzt wird.

Server

Nehmen Sie Apache als Beispiel und fügen Sie Rewrite-Regeln zu .htaccess hinzu. (Sie müssen zuerst die wiederbeschreibbare Einstellung aktivieren)

#配和react-router,自行忽略写的比较low的正则
RewriteEngine on
RewriteRule classifiedDisplay$ http://www.yangqingcheng.xin/
RewriteRule boutiqueCase$ http://www.yangqingcheng.xin/
RewriteRule aboutUs$ http://www.yangqingcheng.xin/

Verwandte Empfehlungen:

react-router browserHistory-Aktualisierungsseite 404-Problem So lösen Sie

Drei Arten von Vue-Router zur Realisierung von Sprüngen zwischen Komponenten

Über Vue-Router zur Realisierung von Sprungparameterübertragungen zwischen Komponenten

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion zur Verwendung von React-Router HashRouter und BrowserRouter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!