面试官我想做个Reacter(React路由)

路由的基础用法回顾,源码study,文章首发于docs,求个star

依赖

路由依赖于 react-router,但是一般 pc 路由使用 react-router-dom,它依赖于 react-router

npm i react-router-dom -S

基本路由

  • Link 组件渲染路径,形式 a标签
  • Route 组件渲染组件,匹配路由
  • HashRouter 是 hash路由,BrowserRouter 是 history路由
  • component 和 render 都可以渲染组件,component 优先级匹配高于 render;render 为一个函数,可以做逻辑渲染,给组件传递参数
import { HashRouter, Route, Link } from 'react-router-dom'
class App extends Component {
  ...
  render() {
    return (
      <div>
        <Link to="/">首页</Link>
        <Link to="/page">Page</Link>
   {/* 配置路由规则  exact表示精确匹配,防止匹配其他页面的时候匹配到/,也就是首页*/}
        <Route path="/" exact="" component="{Home}"/>
        <Route path="/page" component="{Page}"/>
        <Route path="{`/user/login`}" render="{routeProps" ==""> {
            return (
              <List name="这是render渲染" user="mondo" {...routeProps}=""/>
            );
          }}
        ></Route>
      </div>
    );
  }
}

ReactDOM.render(
  <HashRouter>
    <App/>
  </HashRouter>, 
  document.getElementById('root')
)
  • Link只配置路由,NavLink可做导航路由,可配置activeClassNameactiveStyle
import { NavLink as Link } from 'react-router-dom';

class Nav extends Component {
  render () {
    return (
      <ul className="nav">
        <li className="list"><NavLink to="/archive" activeClassName="active">归档</NavLink></li>
        <li className="list"><NavLink to="/about" activeClassName="active">关于</NavLink></li>
      </ul>
    );
  };
}

export default Nav;

嵌套路由

在想要嵌套的组件里再次配置路由

// User.js
import React from 'react'
import { Route, Link } from 'react-router-dom'

const User = (props) => {
      // match 可以读取上层路由
    const { match } = props
    return (
       <div>
            <Link to="{`${match.path}/login`}">登录</Link>
            <Link to="/user/reg">注册</Link>
            <Route path="{`${match.path}/login`}">login</Route>
            <Route path="/user/reg">reg</Route>
       </div>
    )
}

export default User

// App.js
<Route path="/user" component="{User}"/>

路由传值

  • params 动态路由传参,通过组件内 props.match.params访问
// App.js
<Link to="/list/1/4">列表</Link>
{/* 必须使用 component 来指定组件,不然访问不到match */}
<Route path="/list/:id/:user" component="{List}/">

// List.js
const List = (props) => {
  console.log(props.match.params) // { id: 1, user: 4 } 
  return (
    <h2>
      { props.name }{ props.children }
    </h2>
  )
}
  • query 传值直接取 ?后面的值,但是 router没提供相应的方法,需要自己写一个函数来提取参数
  • 隐式传参,使用 to传递对象 state

编程式路由

利用 props.history来跳转路由

// List.js
const { history } = props

const goRoute = () => {
  if (history) {
    history..push('/user')
  }
}
// 可以使用对象传值
const goRoute = () => {
  if (history) {
    history..push({
        pathname: '/user',
        state: {
            id: 2
        }
    })
  }
}

重定向

重定向使用 Switch组件

// ErrorPage.js
import React from 'react'

class Error extends React.Component{
    render(){
        return(
            <h1>页面404</h1>
        )
    }
}
export default Error

// App.js
import ErrorPage from './components/ErrorPage'

class App extends React.Component {
  ...
  render() {
    ...
    {/* Switch表示如果匹配到了路由,就不再往下面匹配了,如果不写Switch,则一直会匹配到404页面 */}
    <Switch>
      {/* 配置路由规则  exact表示精确匹配,防止匹配其他页面的时候匹配到/,也就是首页*/}
      <Route path="/home" exact="">Home</Route>
      <Route path="/page" component="{Page}"/>
      <Route path="/user" component="{User}"/>
      {/* 必须使用 component 来指定组件,不然访问不到match */}
      <Route path="/list/:id/:user" component="{List}"/>
      <Redirect from="/" to="/home" exact=""/>
      {/* 没有写path表示匹配到所有的路径 */}
      <Route component="{ErrorPage}"/>
    </Switch>
  }
}

withRouter

由于只有 Route包裹的组件才可以访问到 props内部的路由信息,可以引入 withRouter高阶组件来使内部组件也可以访问路由信息

import React from 'react'

import { withRouter } from 'react-router-dom'


const GoBack = props => {
  console.log(props)
  const goBack = () => {
    props.history.go(-1)
  }
  return <button onClick="{goBack}">返回</button>
}

export default withRouter(GoBack)
原文链接:segmentfault.com

上一篇:React Hooks API 学习记录
下一篇:React Redux面试问题总结

相关推荐

  • 🔥《吊打面试官》系列 Node.js 必知必会必问!

    (/public/upload/f204a3b224d986128f1b4d9b8d06cd17) 前言 codeing 应当是一生的事业,而不仅仅是 30 岁的青春🍚 本文已收录 Git...

    17 天前
  • 高频数据交换下Flutter与ReactNative的对比

    (标题图片来自网络,侵删) 后端使用go写的socketio服务模拟期货行情数据,每10ms推送10条行情数据 ReactNative已经尽力优化了。 Flutter由于没fluttersock...

    1 年前
  • 高性能迷你React框架 anu1.3.0 发布

    anujs1.3.0是一款高性能Reactlike框架,是目前世界上对React16兼容最好的迷你库。 自React16起,相继推出createContext,createPortal, creat...

    2 年前
  • 高德地图 react-amap 实战

    clipboard.png(https://img.javascriptcn.com/5a33946ad8c0ea8ee7870f74f331d0c0 "clipboard.png") reacta...

    7 个月前
  • 高品质 React UI 组件

    (https://img.javascriptcn.com/cca319311c2ea59a2b5cdaa63b997828)(https://link.funteas.com?target=http...

    2 年前
  • 骚操作!在react中使用vuex

    原文地址(https://github.com/zyl1314/blog/issues/12) 前言 笔者最近在学习使用,提到react就绕不过去。redux是一个状态管理架构,被广泛用于rea...

    2 年前
  • 项目文档说明:react + Ant Design 的 blog-react-admin

    效果图(https://img.javascriptcn.com/734ce56fe3a37ab11e9744473f56bae1 "效果图") 前言 此 blogreactadmin 项目是基...

    1 年前
  • 面试题:Hooks 与 React 生命周期的关系

    React 生命周期很多人都了解,但通常我们所了解的都是 单个组件 的生命周期,但针对 Hooks 组件、多个关联组件(父子组件和兄弟组件) 的生命周期又是怎么样的喃?你有思考和了解过吗,接下来我们将...

    8 个月前
  • 面试官:谈谈你对 CSS 盒模型的认识?(你确定会?)

    题目:谈谈你对 CSS 盒模型的认识 涉及知识点(层层递进): 1. 基本概念:标准模型 IE模型(区别) 2. CSS如何设置这两种模型 3. JS如何设置获取盒子模型对应的宽和高 4....

    2 年前
  • 面试官:请手写一个webpack4.0配置

    确认过眼神,你还是没有准备秋招的人?时间仓促。自京东6月8号开启管培生的招聘,就意味着秋招的开始。然而你还在等着秋天的到来?今年形势应该更为严峻,随着各大技术(vue,webpack,react,微信...

    2 年前

官方社区

扫码加入 JavaScript 社区