在React应用程序React中使用Next时出现问题

Question

我正在尝试构建一个React应用程序，并希望使用一些Next.js代码。这是代码：

import React, { Component } from 'react'
import { useRouter } from 'next/router'

const Post = () => {
const router = useRouter()
const { slug } = router.query
return(
<p>Post: {slug}</p>
)
}
export default Post;

这一页是空白的。我的路由器文件是：

import React from 'react';
import {BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import Homepage from '../HomePage'
// import Homepage2 from '../HomePage2'
import AboutPage from '../AboutPage'
import ServicePage from '../ServicePage'
import ShopPage from '../ShopPage'
import ShopSinglePage from '../ShopSinglePage'
import ServiceSinglePage from '../ServiceSinglePage'
import EventPage from '../EventPage'
import EventPageSingle from '../EventPageSingle'
import DonatePage from '../DonatePage'
import BlogPage from '../BlogPage' 
import BlogPageLeft from '../BlogPageLeft' 
import BlogPageFullwidth from '../BlogPageFullwidth'
import BlogDetails from '../BlogDetails' 
import BlogDetailsLeftSiide from '../BlogDetailsLeftSiide' 
import BlogDetailsFull from '../BlogDetailsFull'
import ErrorPage from '../ErrorPage'  
import ContactPage from '../ContactPage' 
import LoginPage from '../LoginPage' 
import SignUpPage from '../SignUpPage' 
import ForgotPassword from '../ForgotPassword' 
import Post from '../../components/BlogPost/[slug]';
import Error from '../../components/404';

const AllRoute = () => { 
return (
<div className="App">
<Router>
<Switch>
<Route exact path='/' component={Homepage}/>
<Route path='/home' component={Homepage} />
{/*<Route path='/home2' component={Homepage2} />*/}
{/*<Route path='/home3' component={Homepage3} />*/}
{/*<Route path='/home4' component={Homepage4} />*/}
<Route path='/about' component={AboutPage} />
<Route path='/service' component={ServicePage} />
<Route path='/shop' component={ShopPage} />
<Route path='/shop-single' component={ShopSinglePage} />
<Route path='/service-single' component={ServiceSinglePage}/>
<Route path='/event' component={EventPage}/>
<Route path='/event-single' component={EventPageSingle}/>
<Route path='/donate' component={DonatePage}/>
<Route path='/blog' component={BlogPage}/> 
<Route path='/blog-left' component={BlogPageLeft}/>
<Route path='/blog-fullwidth' component={BlogPageFullwidth}/> 
<Route path='/blog-details' component={BlogDetails}/>
<Route path='/blog-details-left' component={BlogDetailsLeftSiide}/>
<Route path='/blog-details-fullwidth' component={BlogDetailsFull}/>
<Route path='/404' component={ErrorPage}/>
<Route path='/contact' component={ContactPage}/>
<Route path='/login' component={LoginPage}/>
<Route path='/signup' component={SignUpPage}/>
<Route path='/forgot-password' component={ForgotPassword}/>
<Route path='/posts' component={Post}/>

</Switch>
</Router>

</div>
);
}
export default AllRoute;

所以当我访问http://localhost:3000/posts时，它应该显示一些东西。据我所知，这两条线似乎造成了任何问题：

const router = useRouter()
const { slug } = router.query

Answer 1

您正在混合React路由器和Next.js.中的路由器

如果您在Next.js应用程序中工作，则路由是通过在页面文件夹中创建文件来完成的。来自文件：

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

有关更多信息，请查看：https://nextjs.org/docs/routing/introduction

如果您正在使用带有react-router-dom的React.js，您应该按照他们的文档来阅读查询和参数：https://reactrouter.com/en/v6.3.0/getting-started/tutorial.

请确保选择与您的应用程序中的版本相同的版本。