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