react 编程式导航和声明式导航，前端大牛熬夜把JavaScript面试题整理成了PDF文档

声明式导航自己主要用到的是react中的两个路由组件【Link、NavLink】。其中Link组件的导航方式和HMTL中的a标签类似，在react将虚拟DOM渲染成真实DOM后，Link组件也被渲染成了a标签。下面看一下例子顺便在代码中附上react中的路由懒加载方式：

Link 方式

import React, { Component,lazy,Suspense } from ‘react’//导入了路由懒加载模块

import { Route,Redirect,Link} from ‘react-router-dom’

import Login from ‘…/Login/index’

const lazyComponent = lazy(() => import(‘…/lazyComponent’)); //使用路由懒加载的方式加载组件

export default class World extends Component {

render() {

return (

{/* 使用路由 */}

• {/使用Link跳转，同时携带参数ID/}

  跳转到Login
  跳转到路由懒加载组件

  ---

• {/渲染路由组件Login到该位置，同时接收到路由参数ID/}

  {/重定向/}

• {/使用路由懒加载的模块，路由组件未加载出来前会以Loading字符显示在页面中/}

  <Suspense fallback=