umi约定式路由

一口八宝周

已于 2022-09-23 09:41:31 修改

阅读量1.3k

点赞数 2

分类专栏： react umi 文章标签：前端 javascript react.js

于 2022-07-04 23:19:12 首次发布

本文链接：https://blog.csdn.net/Aguai229/article/details/125609907

版权

react 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

umi

4 篇文章 0 订阅

订阅专栏

除配置式路由外，Umi 也支持约定式路由。约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置。

动态路由

约定 [] 包裹的文件或文件夹为动态路由。

users⽂件夹下的[name].js 即路由配置为/users/:name

{

"path": "/users",

"routes": [

{

"path": "/users",

"exact": true,

"component": require('@/pages/users/index.js').default

},

{

"path": "/users/:name",

"exact": true,

"component": require('@/pages/users/[name].js').default

}

],

"component": require('@/pages/users/_layout.js').default

}

在 users 目录中，再创建 [name].js、[name].css
访问 [name].js：http://localhost:8000/users/xxx

动态可选路由

约定 [ $] 包裹的文件或文件夹为动态可选路由。

src/pages/users/[id$].tsx 会成为 /users/:id?

嵌套路由

Umi 里约定目录下有 _layout.js 时会生成嵌套路由，以 _layout.js 为该目录的 layout。layout 文件需要返回一个 React 组件，并通过 props.children 渲染子组件。

import React from 'react';
import styles from './_layout.css';

export default function Page(props) {
  return (
    <div>
      <h1 className={styles.title}>Page users/_layout父组件</h1>
      <div>{props.children}</div>
    </div>
  );
}

为 _layout.js 创建子组件，users 的首页 index.js

import React from 'react';
/*  */import { Link } from "umi"
import styles from './index.css';

export default function Page() {

  return (
    <div className={styles.title}>
      <h1>用户页users下的 index页面</h1>
    </div>
  );
}

访问路由http://localhost:8000/users

跳转路由

1.引入import {Link} from "umi"

以下为users/index.js

import React from 'react';
import {Link} from "umi"
import styles from './index.css';

export default function Page() {
  const userList = [
    { id: 1, name: 'zxt' },
    { id: 2, name: 'zzz' }
  ]
  return (
    <div className={styles.title}>
      <h1>用户页users下的 index页面</h1>
      <ul>
        {userList.map(val => (
          <li key={val.id}>
            <Link to={`/users/${val.name}`}>
            {val.name}
            </Link>
            
          </li>
        ))}
      </ul>
    </div>
  );
}

以下为users/[name].js

import React from 'react';
import styles from './[name].css';
import {history} from 'umi';

export default (props)=> {
    return (
        <div className={styles.title}>
            <h1>我是动态路由页面---详情页</h1>
            <p>欢迎来到{props.match.params.name}的详情页</p>
            <button onClick={()=>props.history.goBack()}>返回</button>
        </div>
    );
}

页面效果图：