Une brève discussion sur la façon d'utiliser React-Router HashRouter et BrowserRouter

Cet article présente principalement l'utilisation de React-Router HashRouter et BrowserRouter. Si vous êtes intéressé, vous pourrez en apprendre davantage.

Le site officiel recommande BrowserRouter, mais cette méthode nécessite la coopération du serveur, et l'inconvénient est que la redirection ne peut aller que vers la page d'accueil et ne peut pas rester sur la page actuelle. L'utilisation spécifique est très simple, voici un exemple.

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>

NavigateurRouter

Frontend

Identique au code ci-dessus, sauf que le HashRouter est remplacé par le composant BrowserRouter.

Serveur

Prenons Apache comme exemple, ajoutez des règles de réécriture à .htaccess. (Vous devez d'abord activer le paramètre réinscriptible)

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

Recommandations associées :

react-router browserHistory actualiser la page 404 problème Comment résoudre

Trois types de Vue-Router pour réaliser un saut entre les composants

À propos de vue-router pour réaliser un transfert de paramètres de saut entre les composants

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!