除配置式路由外，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>); }

頁面效果圖：

?詳細可看：約定式路由

總結

以上是生活随笔為你收集整理的umi约定式路由的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。