React-Router 5.0 制作导航栏+页面参数传递

news2024/11/26 9:39:30

React使用路由

使用React构建SPA应用(单页面应用)，要想实现页面间的跳转，首先想到的就是使用路由。在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom。本文主要针对react-router-dom进行说明。

众所周知,JS由 DOM BOM ECMAScript 组成, React-Router-Dom 使用 BOM 提供的 history API

React-Router-Dom有两种路由方式 HashRouter和BrowserRouter

HashRouter特点在URL中采用#号来作为当前视图的地址,改变#号后的参数，页面并不会重载
BrowserRouter特点和正常浏览网易url类似页面并不会重载

React-Router-Dom 导航实现

管他三七二十一先安装再说: yarn add react-router-dom

在使用React-Router-Dom的API之前需要使用BrowserRouter 或 HashRouter包裹住

// 将路由定义为根组件
import {BrowserRouter, HashRouter as Router} from 'react-router-dom';

ReactDOM.render(
    <Router>
        <App />
    </Router>
, document.getElementById('root'));

// 然后定义路由
 <Switch>
      <Route exact path="/组件1" component={组件1} />
      <Route path="/组件2" component={组件2} />
      <Route path="/组件3">
            <组件3 />
      </Route>
      <Route render={(props) => {
            return (
                <div>
                    Router Not Found~ 404
                </div>
            );
      }} />      
</Switch>

// 导航实现
<NavLink to="/组件1" activeStyle={activeStyle}>组件1</NavLink>
<NavLink to="/组件2" activeStyle={activeStyle}>组件2</NavLink>
<Link to="/组件3" activeStyle={activeStyle}>组件3</Link>

以上代码已经实现了一个基本的导航

示例:

导航实现

导航代码剖析

BrowserRouter 和 HashRouter已经介绍过了两种url不同的展现形式
定义路由时使用了三种不同的方式:

指定component对应的组件
将组件作为子组件
对router指定render函数。返回一个组件

几种声明方式的区别:

第一种直接指定是比较常见的这样会将history对象直接注入到组件的props
第二种是路由跳转过去只展示对应组件 props里面不存在history对象如果想使用history对象的需要使用withRouter这个高阶函数进行history注入
第三种可以直接传入props 直接拥有history对象比较方便

Switch组件:
类似于编程语言的条件控制语句,匹配到一个Route就不会往下匹配了

Route组件:
如果Route没用指定path 只要匹配不到path的都会渲染这个组件可以用这个增加用户体验实现一个友好404页面

exact属性严格匹配路由防止 /one 匹配到 /one/two这个路由因为路由的匹配顺序是至上而下定义两个路由如果 /one/two 在前面的话不使用严格匹配则不会返回预期结果

NavLink 和Link
这两个组件都是对 <a href="">A链接</a> 的一种封装但是使用场景不太一样
如果选择导航栏的时候使用NavLink非常合适因为他直接提供activeStyle等属性直接聚焦在这个组件上时style会应用给组件

Link一般作用于跳转到其他页面实则就是A链接

React-Router-Dom 页面跳转参数传递

主要就是使用history对象进行页面跳转

API介绍：

history.goBack() 返回上一页
history.replace() 在有些场景下面重复使用push 或者 a标签会产生死循环为了避免这种情况发生在可能出现死循环的地方使用replace方式来跳转
history.push() 进入新页面

页面参数传递

第一种

    // 隐示传参
    传递
    props.history.push(`/test`, {
                name: 'sb'
            });
    获取
    props.location.state

第二种

    传递
    props.history.push({
                pathname: '/test',
                query: {
                    id: 1
                }
            });
    获取
    props.location.query

第三种

    传递
    props.history.push('/about/1');
    获取
    props.match.params 
    
    
    或者
    props.history.push('/about?id=1');
    获取
    props.location.search