Home > Web Front-end > JS Tutorial > A brief discussion on how to use react-router HashRouter and BrowserRouter

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

小云云
Release: 2017-12-29 16:27:12
Original
2998 people have browsed it

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>
Copy after login

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/
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template