为什么反应路线在 nextjs 中不起作用？

Question

pages/index.js 的内容如下：

import { BrowserRouter as Router,History, Switch, Route } from 'react-router-dom';
import TestSocket from '../components/testSocket/TestSocket';
export default function Index(){
    return(
        <Router>
          <Switch>
             <Route exact path='/a' component={TestSocket}/>
          </Switch>
       </Router>
   )
}

当我访问页面http://localhost:3000/a时，浏览显示

404 This page could not be found.

这个page 提出了同样的问题，但是，它没有明确说明如何解决这个问题。

您能帮忙详细说明一下解决方案吗？

Answer 1

因为Next.js 中的routing 与React.js. 中的完全不同 在Next.js 中的第一个最大区别是缺少react-router-dom 及其功能（BrowserRouter、History、Switch、Route）

Next.js 有一个基于页面概念的router 文件系统。

当一个文件被添加到 pages 目录时，它会自动 可作为路线使用。

pages 目录中的文件可以用来定义最常见的 模式。

在这里，您可以找到解决问题的最佳来源，并帮助您从 React.js 路由器迁移到 Next.js 路由。 Migrating from React Router