大佬教程收集整理的这篇文章主要介绍了React中路由的基本使用,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
现在我们来搞一搞React中的路由吧,别问我为什么这木喜欢用搞这个字,因为它比较深奥。
注意下面我们使用的是React-Router-DOM
React中的路由基本使用还是满简单的,零碎的小东西有点多,所以我直接把他们揉到一起做了一个小例子,代码我都写上注释了,应该挺简单易懂的
:
react-router-dom
class Home extends Component{
render(){
<span style="color: #0000ff">return<span style="color: #000000"> (
@H_450_44@ <NavLink to="/food" activeClassName="active">food</NavLink><hr/> <NavLink to="/wiki" activeClassName="active">wiki</NavLink><hr/> <NavLink to="/profile" activeClassName="active">profile</NavLink><hr/> </ul>
<span style="color: #000000">
@H_450_44@ {</span><span style="color: #008000">/*</span><span style="color: #008000"> 使用Switch是为了将React默认的包容性路由变为排他性路由 </span><span style="color: #008000">*/</span><span style="color: #000000">} {</span><span style="color: #008000">/*</span><span style="color: #008000"> 包容性路由:/food 既能匹配到/ 又能匹配到/food 排他性路由:只能匹配一个 /food就只能匹配到/food </span><span style="color: #008000">*/</span><span style="color: #000000">} </span><Switch><span style="color: #000000"> {</span><span style="color: #008000">/*</span><span style="color: #008000">Redirect 是路由转化 即匹配到某一个路由转化到另一个路由 </span><span style="color: #008000">*/</span><span style="color: #000000">} </span><Redirect from="/" exact to="/food"/> <Route path="/food" component={FooD}/> {<span style="color: #008000">/*</span><span style="color: #008000"> 除了用Switch外也可以用exact来避免一个路由匹配多个,exact是精准匹配 但是使用exact时需要每个路由上都加上exact才能达到和Switch一样的效果 </span><span style="color: #008000">*/</span><span style="color: #000000">} {</span><span style="color: #008000">/*</span><span style="color: #008000"> <Route path="/wiki" exact component={Wiki}/> </span><span style="color: #008000">*/</span><span style="color: #000000">} </span><Route path="/wiki" component={Wiki}/> <Route path="/profile" component={ProfilE}/> <Route component={Page404}/> </Switch> </div> </Router>
<span style="color: #000000"> )
}
}
<span style="color: #008000">//<span style="color: #008000">定义路由使用的组件
@H_450_44@<span style="color: #008000">//</span><span style="color: #008000">在Food中定义子路由</span>
const Food = () =><span style="color: #000000"> (
const Profile = () =><span style="color: #000000"> (
const Page404 = () =><span style="color: #000000"> (
<span style="color: #008000">//<span style="color: #008000">定义路由使用的组件结束
<span style="color: #008000">//<span style="color: #008000">子路由调用的组件
const Foodlist = () =><span style="color: #000000"> (
export <span style="color: #0000ff">default Home
<div class="cnblogs_code">
特别注意:/index.css是我引入的一个高亮的样式
title="React中路由的基本使用" alt="React中路由的基本使用" src="https://cn.js-code.com/res/2019/03-01/22/7ce16c08507889a0d15ad624d371be48.png" >
index.css里面的代码
运行结果:
title="React中路由的基本使用" alt="React中路由的基本使用" src="https://cn.js-code.com/res/2019/03-01/22/547b15f9e8260fb698040f44bc1de9a0.png" >
这个运行结果丑是丑了点,但是功能没瑕疵,和我一样,不靠颜值吃饭
以上是大佬教程为你收集整理的React中路由的基本使用全部内容,希望文章能够帮你解决React中路由的基本使用所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。