Как организовать маршрутизацию внутри одного компонента в Next.js?

Question

Булат

nextjs

Как организовать маршрутизацию внутри одного компонента в Next.js?

Как реализовать маршрутизацию внутри одного компонента в Next.js, используя подход SPA? У меня есть сайдбар слева и блок с контентом справа, который меняется в зависимости от выбранной ссылки в сайдбаре. В данный момент мой код выглядит следующим образом: 

<pre><code class="javascript">'use client'
import DefaultLayout from "@/app/layout/DefaultLayout";
import {Route, Routes} from "react-router";
import {Router} from "react-router";


const Main = () =&gt; {
    return &lt;Router&gt;
        &lt;DefaultLayout&gt;
            &lt;Routes&gt;
                &lt;Route
                    index
                    element={
                        &lt;&gt;
                            hello
                        &lt;/&gt;
                    }
                /&gt;
            &lt;/Routes&gt;
        &lt;/DefaultLayout&gt;
    &lt;/Router&gt;
}

export default Main</code></pre>

6 сентября 2024 г. 13:23

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для организации маршрутизации внутри одного компонента в Next.js с использованием подхода Single Page Application (SPA) важно правильно использовать механизм маршрутизации, встроенный в Next.js. Вместо использования `react-router`, который чаще используется в React-приложениях, Next.js предоставляет свою собственную систему маршрутизации, которая основана на файловой системе.

Вот как можно реализовать маршрутизацию с сайдбаром и контентом в зависимости от выбранной ссылки. Предположим, у вас есть основные страницы, такие как "Home", "About" и "Contact".

### Шаги для реализации маршрутизации внутри компонента

1. **Создайте структуру папок**:
   - Создайте папку `app` и в ней создайте папки для каждой страницы.
   - Пример: `app/home/page.js`, `app/about/page.js`, `app/contact/page.js`

2. **Создайте компоненты страниц**:
   - Создайте файл `page.js` в каждой из папок, определяющий содержимое соответствующей страницы.

   ```javascript
   // app/home/page.js
   const Home = () => {
       return <div>Welcome to the Home Page</div>;
   };

   export default Home;

   // app/about/page.js
   const About = () => {
       return <div>About Us</div>;
   };

   export default About;

   // app/contact/page.js
   const Contact = () => {
       return <div>Contact Us</div>;
   };

   export default Contact;
   ```

3. **Создайте компонент сайдбара**:
   - Создайте компонент сайдбара, который будет содержать ссылки на страницы.

   ```javascript
   // components/Sidebar.js
   import Link from 'next/link';

   const Sidebar = () => {
       return (
           <nav>
               <ul>
                   <li>
                       <Link href="/home">Home</Link>
                   </li>
                   <li>
                       <Link href="/about">About</Link>
                   </li>
                   <li>
                       <Link href="/contact">Contact</Link>
                   </li>
               </ul>
           </nav>
       );
   };

   export default Sidebar;
   ```

4. **Создайте главный компонент с сайдбаром и контентом**:
   - В этом компоненте вы сможете импортировать и использовать сайдбар рядом с динамическим контентом.

   ```javascript
   // app/layout/DefaultLayout.js
   import Sidebar from "@/components/Sidebar";

   const DefaultLayout = ({ children }) => {
       return (
           <div style={{ display: 'flex' }}>
               <Sidebar />
               <main style={{ marginLeft: '20px' }}>
                   {children}
               </main>
           </div>
       );
   };

   export default DefaultLayout;
   ```

5. **Используйте макет в основном файле**:
   - Поместите ваш макет в файл `app/page.js`, который будет являться вашим корневым компонентом.

   ```javascript
   // app/page.js
   import DefaultLayout from "@/app/layout/DefaultLayout";

   const MainPage = () => {
       return (
           <DefaultLayout>
               <h1>Welcome to the Main Page</h1>
           </DefaultLayout>
       );
   };

   export default MainPage;
   ```

Теперь у вас настроен сайдбар с маршрутами, которые изменяют контент, когда пользователь кликает по ссылкам. Next.js будет автоматически обрабатывать маршрутизацию для соответствующих страниц, и вы можете добавить больше страниц, следуя этой структуре.