除配置式路由外，Umi 也支持約定式路由。約定式路由也叫文件路由，就是不需要手寫(xiě)配置，文件系統(tǒng)即路由，通過(guò)目錄和文件及其命名分析出路由配置。

目錄

動(dòng)態(tài)路由

動(dòng)態(tài)可選路由

嵌套路由?

跳轉(zhuǎn)路由?

---

動(dòng)態(tài)路由

約定?[]?包裹的文件或文件夾為動(dòng)態(tài)路由。

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?目錄中，再創(chuàng)建?[name].js、[name].css

訪問(wèn)?[name].js：http://localhost:8000/users/xxx

動(dòng)態(tài)可選路由

約定?[ $]?包裹的文件或文件夾為動(dòng)態(tài)可選路由。

• src/pages/users/[id$].tsx?會(huì)成為?/users/:id?

嵌套路由?

Umi 里約定目錄下有?_layout.js?時(shí)會(huì)生成嵌套路由，以?_layout.js?為該目錄的 layout。layout 文件需要返回一個(gè) React 組件，并通過(guò)?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?創(chuàng)建子組件，users?的首頁(yè)?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>用戶頁(yè)users下的 index頁(yè)面</h1></div>); }

目錄：

訪問(wèn)路由http://localhost:8000/users

跳轉(zhuǎn)路由?

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>用戶頁(yè)users下的 index頁(yè)面</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>我是動(dòng)態(tài)路由頁(yè)面---詳情頁(yè)</h1><p>歡迎來(lái)到{props.match.params.name}的詳情頁(yè)</p><button onClick={()=>props.history.goBack()}>返回</button></div>); }

頁(yè)面效果圖：

?詳細(xì)可看：約定式路由

總結(jié)

以上是生活随笔為你收集整理的umi约定式路由的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。