@ 表达/ 路由器
基于Expressive MVC的分类声明路由器.
一个主机不可知路由器 表达式 MVC路线被宣布为嵌入式JSX,匹配从树上按逻辑计算(不是单独的配置),导航状态生活在被动状态下 Router 任何组件都可以读取或驱动.
npm install @expressive/router @expressive/react react
宣布路线
路由巢以映射 URL . to 是图案段, as 是页面(或版式)组件。 一个布局通过 children。 。 。 .
import '@expressive/react'; // registers the host adapter
import { BrowserRouter, Route } from '@expressive/router';
<BrowserRouter>
<Route as={RootLayout}>
<Route as={HomePage} /> {/* index - matches the parent path */}
<Route to="blog" as={BlogLayout}>
<Route as={BlogIndex} /> {/* /blog */}
<Route to=":slug" as={BlogPost} /> {/* /blog/:slug */}
</Route>
<Route to="login" redirect="/" /> {/* matched -> redirects */}
<Route none as={NotFound} /> {/* no sibling matched */}
</Route>
</BrowserRouter>;
| Prop | 含义 |
|---|---|
to | URL区段. :name 抓取了一个参数, * 是一个包罗万象。 输入索引路径 . |
as | 匹配时提供组件( 作为布局, 接收) children) (中文(简体) ). |
none | 匹配时没有兄弟姐妹 - 标注在父(root = app 404,巢= 第404节). |
redirect | 匹配时, 将重定向到这里而不是渲染 . |
label 编号 : meta | 显示 nav 和 badcrumbs 的名称/ 自由格式元数据( 通过匹配来标记) . |
参加同一档次仲裁的兄弟姐妹 以声明顺序进行首对没有祖先 Router页:1 <Route> 旋转出一个无头的记忆; BrowserRouter 绑在地址栏上.
读取匹配
页面读取最近的 Route 从上下文 get() 并使用其活性获取器:
import { Route } from '@expressive/router';
const BlogPost = () => {
const { match } = Route.get(); // nearest Route in context; subscribes
return <article>post: {match!.slug}</article>;
};
读取 matched (boolean) 使同样的导航/blog/a → /blog/b) 调和到位,而不是重挂.
导航状态、查询和碎片
Router 暴露位置为被动 path, (中文(简体) ), query, (中文(简体) ), hash,并生成 url
表面 。 通过导航和历史 查询和分解状态.
router.goto('/posts?page=2#comments'); // push
router.goto('/posts', true); // replace
router.url = '/posts?page=2#comments'; // assigning url navigates
router.query.get('page'); // read - subscribes to just this param
router.query.set('page', '2'); // write - pushes a new entry, like goto
router.query.delete('sort'); // delete - also navigates
router.hash; // '' or a leading-# string
router.hash = '#comments'; // pushes through the same settlement path
router.back(); // one entry back
router.go(-2); // move by an arbitrary history delta
地图是单值的(string 键和值; 重复的 URL 键崩溃
到最后一个值。 由 URL 驱动的更改调和同一地图。 散列
是一个不透明、%编码的字符串。 碎片导航不滚动或
自动聚焦元素.
go(delta) 将有限的分数三角形切换为整数级. 零号,
非无穷无尽,离地三角洲无所事事;它从未使用 go(0) 作为
重新装入信号.
暂停和航行结算
路线是悬疑边界. 过 fallback 用来装入冷气 并使用懒惰
页面通常:
const Post = lazy(() => import('./Post'));
<Route to="posts/:id" fallback={<Spinner />} as={Post} />;
应用中导航通过受保护 Router.navigate(work),其默认值
使用主机过渡调度器。 如果下一页或入口守卫暂停,
当前屏幕仍然可见,直到下一个屏幕准备好。 冷货还剩
调制 fallback。 。 。 .
router.navigating 以列报方式仍属真实。 在旁边或周围读
路由内容; 重叠的导航是最新赢的, 因此已取代
以后不能更改页面、历史或状态。 对于应用驱动的浏览器
导航,地址在屏幕结算后写出. 浏览器
后/前和外的历史 API 调用必须先更改它.
覆盖 navigate(work) 用于舞台演示的路由器子类
不一样 状态和命令将接合包起来, 因此重置只需运行
解决 work。 。 。 .
链接
Link 制作一个 <a> 导航内部目标 在正左键.
修改器/中键, 非_self 目标、下载和有计划或
协议相对目标仍然是浏览器拥有的。 它暴露了自己的匹配状态,
因此活动样式不需要单独的组件 :
import { Link } from '@expressive/router';
<Link to="blog">Blog</Link>
<Link to="/posts?page=2" replace>Page 2</Link>
<Link to="https://example.com/docs">External docs</Link>
// active links by subclassing - read `active` / `match`
class NavLink extends Link {
render() {
return (
<a
href={this.href}
onClick={this.go}
className={this.active ? 'active' : undefined}
aria-current={this.active ? 'page' : undefined}>
{this.props.children}
</a>
);
}
}
重定向
Redirect 导航到 to 当挂起, 门打开 when (默认) true),而无所成. 这个 Route redirect 道具是它总替代的快手.
import { Redirect } from '@expressive/router';
<Redirect to="/login" when={!user} /> {/* navigates on mount when `when` is true */}
<Redirect to="/home" replace /> {/* overwrite the current entry */}
Route.redirect 也接受同步或同步入门后卫. 无空
以替换方式重定向字符串,一个 falsy 值允许路径,以及 null
将路径切入最接近的范围 none 路线 :
<Route
to="admin"
fallback={<Spinner />}
redirect={async () => (session.authorize() ? undefined : '/login')}
as={Admin}
/>
路由器协调导航,而不是应用数据. 继续取来, 路由/ 页面控制中的突变、 缓存和请求取消; async 字段通过路由边界暂停.
生成导航
NavLinks 使路径等级的导航树 - 它走已声明的路径并自动发送链接 。 它的渲染由 PascalCase 构建 子组件 以覆盖来塑造输出 :
| 成员 | 渲染器 |
|---|---|
Item | 单一链接( 默认为 Link 使用路线 label) (中文(简体) ). |
List | 容器包裹一层物品. |
Group | 嵌入区块; 默认透明 - 将路由嵌入区块转换为主区块 . |
import { NavLinks } from '@expressive/router';
class SideNav extends NavLinks {
List = (props) => <ul className="side">{props.children}</ul>;
Group = (props) => (
<section>
<h3>{props.route.label}</h3>
{props.children}
</section>
);
}
这些成员是可支配的反应性子组成部分,与现场事件相连——同一个机制 Component 提供,通过 子组件。 。 。 .
运行时边界
Router保持记忆历史 用它做测试 非浏览器主机.BrowserRouter绑定浏览器地址和历史 API.- 服务器渲染不会在请求之间共享全局路由器,而是 软件包不是SSR路由/数据/水分系统.
- 本地反应可以使用
Router· ;BrowserRouter, (中文(简体) ),Link,以及NavLinks为: 浏览器/DOM-facing.
支持的位置模型是路径名,单值查询参数,以及 一个不透明的碎片。 底名挂起, 任意历史状态, 自动 滚动至锁定、滚动恢复、导航阻塞和数据路由API 目前尚未建置.
路线很平坦 @expressive/mvc 组件,所以它们在任何可表达的主机适配器下产生.
完整指南和实例 表示式.dev/docs/指针/路由器
许可证
麻省理工学院