A brief discussion on how to use react-router HashRouter and BrowserRouter

This article mainly introduces the use of react-router HashRouter and BrowserRouter. It has certain reference value. If you are interested, you can learn about it. I hope it can help everyone.

The official website recommends BrowserRouter, but this method requires the cooperation of the server, and the disadvantage is that the redirection can only go to the homepage and cannot stay on the current page. The specific usage is very simple, as shown with an example.

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

Same as the code above, except that the HashRouter is replaced by the BrowserRouter component.

Server

Take apache as an example, add rewrite rules to .htaccess. (You need to turn on the rewriteable setting first)

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

Related recommendations:

react-router browserHistory How to solve the 404 problem when refreshing the page

Three types of Vue-Router to implement jumps between components

About vue-router to implement jump parameter transfer between components

The above is the detailed content of A brief discussion on how to use react-router HashRouter and BrowserRouter. For more information, please follow other related articles on the PHP Chinese website!