快来加入我们吧！《小河山菜鸟》为前端开发者提供技术资料和系列基础文章。为了更好的用户体验，请移步我们的官网小河山菜鸟（https://xhs-rookies.com/）学习，及时获取最新文章。“代码裁缝”，如果您对我们的文章感兴趣，或者想提点建议，请关注“小河山菜鸟”微信公众号，与我们取得联系，您也可以在微信上观看我们的文章。每一个建议或同意，都是对我们莫大的鼓励。前言本节我们将介绍React中的react-router，路由跳转的配置，以及使用。本文将为大家介绍以下内容：认识react-routerreact-routerreact-router的基本使用进阶使用react-router-config了解react-router如果您对router这个词不熟悉，可以到这里补充往下阅读前你的路由知识注意：以下内容基于react-routerv5版本，如与读者目前使用的不符，请基于官网安装react-router：yarnaddreact-router-domnpminstallreact-router-dom什么是react-router？ReactRouter是一组以声明方式与您的应用程序结合的导航组件。无论您是想为您的Web应用程序提供可收藏的URL还是在ReactNative中使用可组合的导航方法，ReactRouter都可以在任何地方使用React渲染react-router是一组以声明方式与您的应用程序结合的导航组件。也就是说，react-router是React体系中的一个路由库。它通过管理URL来实现组件切换和状态变化。react-router基本上使用ReactRouter中的组件，主要分为三类：路由器BrowserRouter和HashRouterBrowserRouter使用常规的URL路径，创建一个像example.com/some/path这样的真实URL，但是它们需要一个正确配置的服务器HashRouter存储当前位置在URL部分的散列中，因此URL看起来像http://example.com/#/your/page，因为散列永远不会发送到服务器意味着不需要特殊的服务器配置两者之间的主要区别在于它们存储URL以及与Web服务器通信的方式找到一个路径与当前URL匹配的元素，它将呈现它找到的第一个路由并忽略所有其他路由这意味着您应该将包含更具体路径的路由放在不太具体的路径之前。Switch我们来看下面的路由规则：当我们匹配某条路径时，会发现有问题；比如/about路径匹配的时候，/:userid也匹配，最后的NoMatch组件总是匹配；是什么原因？默认情况下，只要在react-router中匹配到path，就会渲染Route对应的组件；但是在实际开发中，我们往往希望有一个排他性的想法：只要匹配到第一个，后面就不要再继续匹配；这时候我们可以使用Switch来包裹所有的Routes；Route它最基本的职责是在其路径与当前URL匹配时，渲染一些UIRoute的渲染方法。三种类型Routecomponent只在location匹配时根据routeprops渲染importReactfrom"react";importReactDOMfrom"react-dom";import{BrowserRouterasRouter,Route}from"react-router-dom";//UserfunctionUser(props){return可用的所有路由属性（匹配、位置和历史）你好{props.match.params.username}！
;}ReactDOM.render(,node);当你使用这个方法加载时，路由器通常会调用React.createElement来根据给定的组件创建一个新的React元素。这意味着如果您使用内联函数在这里渲染组件，那么它将在每次渲染时创建一个新函数，卸载组件并安装新组件，而不是更新。因此，当您使用内联函数渲染组件时，选择render或children方法Routerender您可以传入一个在位置匹配时调用的函数，而不是使用componentpropimportReact为您创建一个新的React元素from"react";importReactDOMfrom"react-dom";import{BrowserRouterasRouter,Route}from"react-router-dom";//方便的内联渲染ReactDOM.render(Home
}/>,node);//wrapping/composing//你可以传播routeProps让它们对你渲染的ComponentfunctionFadingRoute({component:Component,...rest}){return(()}/>);}ReactDOM.render(,node);需要注意的是：的优先级高于，所以不要在同一个Route中同时调用两个方法。Routechildren的工作原理和，只需从“react”导入React；从“react-dom”导入ReactDOM；从“react-router-dom”导入{BrowserRouterasRouter,Link,Route}；functionListItemLink({to,...rest}){return(()}/>);}ReactDOM.render(，节点）；需要注意的是：的优先级高于以上两种，这三种渲染方式都会传递相同的路由propsmatch：包含的信息如何匹配URLlocation：表示应用现在所在的位置history：在JavaScript中使用，以各种方式管理会话历史路由导航，例如：Link、NavLink、Redirect在HTML文档中，它最终会被渲染为一个元素NavLink在Link的基础上增加了一些样式属性，当它的prop匹配到当前位置时，你可以为它设置一个activeClassName(selected)样式。任何时候你想强制导航，你都可以使用，渲染时，将根据to属性值进行导航。选择NAVLINK路径时，相应的元素会变成红色Activestyle：Active（匹配）样式；activeClassName：激活时添加的类；exact：精确匹配；homeaboutprofileHowever,wewillfindthatwhenaboutorprofileisselected,thefirstonewillalsoturnred:thereasonisthatthe/路径也匹配/about或/profile。这时候我们可以在第一个NavLink中添加exact属性homeDefaultactiveClassName:其实当默认匹配的是成功，NavLink会添加之前的动态活动类；所以我们也可以直接写stylea.active{color:red;}当然如果担心这个类在其他地方用到会出现样式级联，也可以自定义classhomeaboutprofileRedirectRedirect用于路由重定向，当该组件出现时，会跳转到对应的to路径，Redirect最常用的字段场景是对用户的浏览器进行认证，输入Userinterfaceurl；如果用户未登录，则需要将其重定向到登录页面。如果用户已经登录，则可以进入用户界面。登录页面对应的Route是预先在App.js中定义的：...OtherRoute在User.js中编写相应的逻辑代码：this.state={isLogin:false,}}render(){返回this.state.isLogin？(微信公众号：小河山菜鸟
用户名：码工裁缝
):()}}react-routerAdvanced使用嵌套路由这个例子展示了嵌套路由是如何工作的。路由/topics加载主题组件，该组件根据路由:id值有条件地呈现任何进一步的。从“react”导入React；从“react-router-dom”导入{BrowserRouterasRouter、Switch、Route、Link、useRouteMatch、useParams}；导出默认函数App(){return();}functionHome(){returnHome
;}函数关于（）{返回<h2>关于;}functionTopics(){letmatch=useRouteMatch();return(主题
{/*Topics页面有自己的
和更多基于路由的在/topicsURL路径上你可以把这里的第二个看成是所有主题的“索引”页面，或者没有选择主题时显示的页面*/}请选择一个主题。
RequestedtopicID:{topicId}
;}动态路由当我们谈论动态路由时，我们指的是当您的应用呈现路由时发生的情况，而不是在运行的应用程序之外进行配置或达成一致。这意味着几乎所有东西都是ReactRouter中的组件。下面是对API的回顾，以了解它是如何工作的：首先，为您想要定位的环境获取一个Router组件，并将其呈现在应用程序之上。//react-dom（我们将在这里使用）从“react-router-dom”导入{BrowserRouter};ReactDOM.render(,el);constApp=()=>();此路线将呈现，其中props是路由器特定的东西，例如{match,location,history}。如果用户不在/dashboard上，路由将呈现null。react-router-config配置路由的方式有很多种，我们来看看官网的最佳实践//路由配置只是数据//React非常擅长将数据映射到组件，而是一个component.///我们的路由配置只是一个逻辑“路由”数组，其中包含路径和组件props//按照与``中相同的顺序排序。//由配置constroutes=[{path:"/sandwiches",component:Sandwiches},{path:"/tacos",component:Tacos,routes:[{path:"/tacos/bus",component:Bus},{path:"/tacos/cart",component:Cart}]}];填入App中导出默认函数App(){ReactDOM.render({routes.map((route,i)=>())} ,document.getElementById('root'))}组在这个儿functionSandwiches(){return三明治
;}functionTacos({routes}){return(炸玉米饼
{routes.map((route,i)=>())}Bus
;}functionCart(){returnCart
;}//的特殊包装器知道如何处理“子”路由//通过将它们传递给它呈现的组件的`routes`道具functionRouteWithSubRoutes(route){return((//传递子-routes向下保持嵌套)}/>);}下一节预览在这一节我们学习了高阶组件和组件中的React-Router补充内容。至此，我们就学习了React的相关知识。下一节，我们将为之前的留言板添加登录功能！
