He estado un tiempo fuera del mundo de ReactJS y decidí volver y probar NextJS . Sin embargo, recibo un problema de Llamada de gancho no válida .

Estoy tratando de convertir mi proyecto ReactJS en un proyecto NextJS. Mostraré el código en un formato más corto, solo como ejemplo.

Aquí está mi Reactjs:

índice.js

 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));

Aplicación.js

 import React, {Component} from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import MainPage from './components/MainPage'; class App extends Component { render() { return ( <Router> <main> <Switch> <Route exact path='/' component={MainPage}/> </Switch> </main> </Router> ); } } export default App;

Página principal.js

 import React, { Fragment } from 'react'; import './MainPage.css'; const MainPage = () => { return ( <Fragment> <div> Hello There :-) </div> <Fragment> ); }; export default MainPage;

Aquí está mi Nextjs:

_app.js

 import '../styles/globals.css' function MyApp({ Component, pageProps }) { return <Component {...pageProps} /> } export default MyApp

índice.js

 import React, {Component} from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import MainPage from './components/MainPage'; class App extends Component { render() { **// not sure about the render** return ( <Router> <main> <Switch> **// I think was switched to Routes** <Route exact path='/' component={MainPage}/> **// I think was switched to element** </Switch> </main> </Router> ); } } export default App;

Página principal.js

 import styles from '../styles/Home.module.css' export default function Home() { return ( <div className={styles.container}> <main className={styles.main}> <h1 className={styles.title}> Welcome to <a href="https://nextjs.org">Next.js!</a> </h1> </main> </div> ) }