React-router

  • Z时代
  • 2024-01-10
  • 分类：综合

react

前端路由：路由的本质是页面的URL变化时，页面的显示结果根据URL的变化而变化，但是页面不会刷新，在单页应用中，大部分页面结构不变，只改变部分内容时，可以采用前端路由。

其中，单页应用表示的是页面之间的切换只需要局部更新，重新请求了前端路由和组件状态。

前端路由的优点：不需要每次都从服务器获取

前端路由的缺点：使用浏览器前进或者后退键时会重新发起请求

React-router就是完全用React组件实现路由，使用React-router需要先在项目中安装react-router-dom ，安装方式为：

进入项目目录，npm install react-router-dom -save-dev

React-router的工作方式

在组件的最顶层放一个HashRouter或者BrowserRouter，然后在组件树中又包含很多Route组件，顶层的组件负责监听URL的变化


其中HashRouter或者BrowserRouter两者的区别是：

HashRouter支持的URL形式为：/#/detail

BrowserRouter支持的URL形式为：/detail

对于单页应用，要实现在不同的页面之间切换的方式主要有：

（1）使用Link，使用之前要先在组件中导入import { Link } from ‘react-router-dom’;，其实Link最终也是相当于是在渲染标签，只是说使用React-router并不会出现页面之间的跳转，而是只是局部更新页面。

Eg：…

(2)使用Route和Switch

Eg：






其中path属性用于匹配路径

在使用前端路由的时候，我们往往需要在页面刷新的时候，把对应的参数传递给link到的那个页面，比如显示详情时，就需要在刷新前把参数传出去，这里，我才用的解决方法是利用state传参，具体代码格式为：

var date={id:this.props.message.id,

onecategory:this.props.message.onecategory,

category:this.props.message.category,

picture:this.props.message.picture,

title:this.props.message.title,

text:this.props.message.text};

var path={

pathname:’/detail/’+‘id=’+this.props.message.id,

state:date,

}

return (

…）

这样，在目标组件Detail使用接收的参数，如：

this.props.location.state.title

以上是 React-router 的全部内容， 来源链接： utcz.com/z/383437.html

回到顶部