声明式导航自己主要用到的是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=