react-router react路由层

发布时间：2020-12-15 20:21:32 所属栏目：百科来源：网络整理

导读：React-router React-router提供了一些router的核心api，包括? Router , Route , Switch? 等，但是它没有提供dom操作进行跳转的api。 React-router-dom React-router-dom提供了 BrowserRouter ,?? Route ,? Link 等api,我们可以通过dom的事件控制路由。例如点

React-router

React-router提供了一些router的核心api，包括?Router,Route,Switch?等，但是它没有提供dom操作进行跳转的api。

React-router-dom

React-router-dom提供了 BrowserRouter,??Route,? Link 等api,我们可以通过dom的事件控制路由。例如点击一个按钮进行跳转，大多数情况下我们是这种情况，所以在开发过程中，我们更多是使用React-router-dom。

引入

import { BrowserRouter as Router,?HashRouter,?Route,Switch } from ‘react-router-dom‘;

HashRouter不太推荐使用，路由：http://localhost:3000/#/，看起来比较怪

使用

<Router>

　　<Switch>

　　　　<Route exact path="/" component={Login} />

　　　　<Route path="/login" component={Login} />

　　</Switch>

</Router>

exact控制匹配到/路径时不会再继续向下匹配，path标识路由的路径，component表示路径对应显示的组件。

扩展***

?扩展1-------全部匹配，渲染

<Router>

　　<div>

　　　　<Route path=‘/‘ component={Login} />

　　　　<Route path=‘/second‘ component={Second} />

　　</div>

</Router>

http://localhost:3000/second? ?Login组件和Second组件都被渲染，而往往我们只想渲染Second组件

解决办法：

使用Switch，Switch常用于Router中作为容器组件，它使得路由变为唯一匹配，匹配到第一个路由不再往后匹配

<Router>

　　<Switch>

　　　　<Route exact path=‘/‘ component={Login} />

　　　　<Route path=‘/second‘ component={Second} />

　　　　<Route path=‘/second1‘ component={Home} />

　　</Switch>

</Router>

此时http://localhost:3000/second只渲染Second组件

扩展2------ Link和NavLink的选择

<Link to=‘/second‘>Home</Link>? ?// to=字符串

<Link to={{

　　pathname: ‘/second‘,

　　search: ‘?a=1‘,

　　hash: ‘#123‘,

　　state: { visible: true }

}}>Home</Link>? ?// to=Object

NavLink提供更多的Api,如前选中的路由设置类名、样式以及回调函数

<NavLink activeClassName=‘selected‘ to=‘/home/123‘>Second</NavLink>

扩展3------this.props

this.props上添加了history，?location， match

您可能遇到？？？

问题1：?

<Router>

　　<Route exact path=‘/‘ component={Login} />

　　<Route exact path=‘/second‘ component={Second} />

</Router>

出现bug? ??A <Router> may have only one child element? ?这说明Router中必须只有一个子元素，也就是说需要一个容器元素

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!