Tengo 3 componentes en nextjs y quiero lograr el siguiente fragmento en nextjs
<Route path="/" component={homePage} /> <Route path="/about" component={aboutPage} /> <Route path="/faq" component={faqPage} />Q1. ¿Cómo puedo hacer lo mismo en nextjs sin actualizar la página? (sin enrutador de reacción)
(Editar: algunos académicos sugieren leer los documentos, pero lo he leído a fondo y lo que quiero es pasar un componente junto con la ruta) ¿Es esto posible en el próximo js?
P2: Si tengo una URL como /products?product_id=productid y en la actualización quiero que la URL sea /products (básicamente quiero eliminar todos los parámetros en la actualización) ¿Cuál es la mejor práctica para hacer esto?
Gracias por adelantado
NextJS funciona en un enrutamiento basado en un sistema de archivos basado en convenciones. Debería colocar sus componentes en una estructura de directorio que coincida con las rutas que desea.
Más detalles aquí:
Los documentos de Next.js realmente no cubren cómo cambiar los componentes de <Route> , sin embargo, tienen muchos ejemplos como código sobre cómo hacer la mayoría de las cosas con Next.js. https://github.com/vercel/next.js/tree/canary/examples/layout-component
Lo siguiente es lo que usé como alternativa al componente (no hay una alternativa directa de Next.js).
_app.js
export default function MyApp({ Component, pageProps }) { // Use the layout defined at the page level, if available const getLayout = Component.getLayout || ((page) => page) return getLayout(<Component {...pageProps} />) }Cualquier página:
import Layout from '../components/layout' import Sidebar from '../components/sidebar' export default function About() { return ( <section> <h2>Layout Example (About)</h2> <p> This example adds a property <code>getLayout</code> to your page, allowing you to return a React component for the layout. This allows you to define the layout on a per-page basis. Since we're returning a function, we can have complex nested layouts if desired. </p> <p> When navigating between pages, we want to persist page state (input values, scroll position, etc) for a Single-Page Application (SPA) experience. </p> <p> This layout pattern will allow for state persistence because the React component tree is persisted between page transitions. To preserve state, we need to prevent the React component tree from being discarded between page transitions. </p> <h3>Try It Out</h3> <p> To visualize this, try tying in the search input in the{' '} <code>Sidebar</code> and then changing routes. You'll notice the input state is persisted. </p> </section> ) } About.getLayout = function getLayout(page) { return ( <Layout> <Sidebar /> {page} </Layout> ) } La parte principal del diseño que desea envolver alrededor de las páginas, components/layout.js :
import Head from 'next/head' import styles from './layout.module.css' export default function Layout({ children }) { return ( <> <Head> <title>Layouts Example</title> </Head> <main className={styles.main}>{children}</main> </> ) }Lo que sucede es que _app.js envuelve todas las páginas dentro del diseño declarado. Luego, cada página define a qué diseño pertenece esa página. Luego, el diseño acepta una página como objeto de utilería {child} que luego puede representar en cualquier parte de su página de diseño.
A continuación, utiliza el enrutamiento basado en el sistema de archivos, su estructura de carpetas debería verse como
-- pages -- index.js -- about/index.js -- faq/index.jsPara la parte del componente personalizado, cree un componente en el que se pueda hacer clic, al hacer clic, use el siguiente enrutador incorporado para redirigir
const router = useRouter(); router.push('/');