reactjs - Next.js 页面无法路由

Question

开发环境
next.js
Typescript
Styled-components

我在构建 next.js 环境中所做的工作
yarn create next-app
yarn add --dev typescript @types/react @types/node
yarn add styled-components yarn add -D @types/styled-components

我跑了上面的四个

我不明白

执行上述命令，搭建next.js的环境。

我在 pages 目录下创建了 user.tsx 并访问了 pages/users，但是我得到了 404 Not Found 错误。为什么？

包.json

{
  "name": "next-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "9.4.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "styled-components": "^5.1.1"
  },
  "devDependencies": {
    "@types/node": "^14.0.18",
    "@types/react": "^16.9.41",
    "@types/styled-components": "^5.1.0",
    "typescript": "^3.9.6"
  }
}

import React, { FC } from "react";
import styled from "styled-components";
import Sidebar from "../components/atoms/SideBar";
import UserList from "../components/atoms/UserList";

const UsersStyle = styled.div`
  display: flex;
  height: 100vh;
`;

export const User: FC = () => {
  return (
    <UsersStyle>
      <Sidebar />
      <UserList />
    </UsersStyle>
  );
};

标签： reactjstypescriptwebpacknext.jsstyled-components

Answer 1

尝试将代码更改为默认导出。

import React, { FC } from "react";
import styled from "styled-components";
import Sidebar from "../components/atoms/SideBar";
import UserList from "../components/atoms/UserList";

const UsersStyle = styled.div`
  display: flex;
  height: 100vh;
`;

const User: FC = () => {
  return (
    <UsersStyle>
      <Sidebar />
      <UserList />
    </UsersStyle>
  );
};

export default User;