Problem with using Next in React app React

Question

I am trying to build a React app and want to use some Next.js code. Here is the code:

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;

And the page is blank. My router file is:

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;

So when I visit http://localhost:3000/posts it is supposed to show something. As far as I understand, these two lines seems to be causing any problems:

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

node_modules · Accepted Answer · 2022-10-11 13:57:46Z

1

You are mixing React router and router from Next.js.

If you are working inside Next.js application than routing is done by creating files inside page folder. From documentation:

When a file is added to the pages directory, it's automatically available as a route.

For more info check: https://nextjs.org/docs/routing/introduction

If you are working with React.js with react-router-dom you should follow their documentation for reading query and params: https://reactrouter.com/en/v6.3.0/getting-started/tutorial.

Be sure to choose same version as the one you have in your application.

edited Oct 11, 2022 at 13:57

node_modules

4,9756 gold badges25 silver badges38 bronze badges

answered Oct 11, 2022 at 13:50

Zoran

314 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Problem with using Next in React app React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related