Next.js-基于文件的路由
基于文件的路由
在 Next.js 中,一个 page(页面) 就是一个从 .js、jsx、.ts 或 .tsx 文件导出(export)的 React 组件 ,这些文件存放在 pages 目录下。每个
page(页面)都使用其文件名作为路由(route)。
示例:
如果你创建了一个命名为 pages/about.tsx
的文件并导出(export)一个如下所示的 React 组件,则可以通过 /about 路径进行访问。
import React from "react";
function About() {
return <div>About</div>
};
export default About;
默认路由
index.tsx总是被当作它所在文件夹的默认路由界面.
示例:
在pages目录下新建一个about文件夹, 里面创建一个index.tsx
index.tsx
import React from "react";
const About: React.FC = () => (
<div>
<h1>The About Page</h1>
</div>
);
export default About;
访问
具有动态路由的页面
Next.js 支持具有动态路由的 pages(页面)。
示例:
如果你创建了一个命名为 pages/portfolio/[id].tsx 的文件,那么就可以通过
portfolio/1、portfolio/2 等类似的路径进行访问。
[id].tsx
import React from "react";
import { useRouter } from "next/router";
const PortfolioProjectPage: React.FC = () => {
const router = useRouter();
// query为路径参数, 类型为Object, 所以使用es6的解构语法
const { id } = router.query;
return (
<div>
<h2>The Portfolio Project Page</h2>
<p>id = { id }</p>
</div>
);
};
export default PortfolioProjectPage;
浏览器
多个嵌套的动态路由字段
可以使用[…whateverNameYouWant].tsx获取所有嵌套的路由字段.
创建一个命名为 pages/blog/[…slug].tsx 的文件
访问localhost:3000/blog/abc/123时, slug会被赋值成一个数组, 这个数组内含所有路由的值
slug = [abc, 123]
import React from "react";
import { useRouter } from "next/router";
const BlogPostPage: React.FC = () => {
const router = useRouter();
const { slug } = router.query;
return (
<div>
<h1>The Blog Post Page</h1>
<p>{ slug }</p>
</div>
)
};
export default BlogPostPage;
浏览器
导航(Navigation)
组件式
可以使用next/link的Link组件, 与react-router使用方法一样
href属性值为要导航到的路由
import React from "react";
import Link from "next/link";
const ClientsPage: React.FC = () => {
const clients = [
{ id: "max", name: "Maximilian" },
{ id: "manu", name: "Manuel" },
];
return (
<div>
<h1>The Clients Page</h1>
<ul>
{
clients.map(
({ id, name }) =>
<li>
{/*
href可以使用模板字符串,
也可以使用对象赋值, pathname: 路径名, query: 参数值
此段代码可以写为:
<Link href={ `/clients/${ id }` }>
{ name }
</Link>
*/ }
<Link href={ {
pathname: "/clients/[id]",
query: { id: id }
} }>
{ name }
</Link>
</li>
)
}
</ul>
</div>
);
};
export default ClientsPage;
编程式
导入next/router的useRouter
使用push方法或者replace方法, 参数为要导航到的路由
- push: 可以回退页面
- replace: 直接取代, 不可以回退页面
import React from "react";
import { useRouter } from "next/router";
const ClientsProjectPage: React.FC = () => {
const router = useRouter();
const loadProject = () => {
router.push(
/*
同上, 这里也可以使用字符串
例如:
"/clients/max/projectA"
* */
{
pathname: "/clients/[id]/[clientProjectId]",
query: { id: 'max', clientProjectId: "projectA" }
});
}
return (
<div>
<h2>The projects of a Given Client</h2>
<button onClick={ loadProject }>
Load Project A
</button>
</div>
);
};
export default ClientsProjectPage;