Маршрутный эквивалент в Next.js с функцией рендеринга для вложенных компонентных маршрутов? - PullRequest
Новая
       13

Маршрутный эквивалент в Next.js с функцией рендеринга для вложенных компонентных маршрутов?

0 голосов
/ 27 октября 2018

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

${currentPath} - это /user в приведенном ниже фрагменте. 

    <div>
     <UserNavbar/>
     <SecondaryNavbar/>
      <div>
        <Route path={`${currentPath}/dashboard`} exact
         render={() => <Dashboard {...this.props}/>} />
        <Route path={`${currentPath}/listings`} exact
         render={() => <Listings {...this.props}/>} />
        <Route path={`${currentPath}/listings/new`} exact
         render={() => <AddNewListing {...this.props}/>} />
        <Route path={`${currentPath}/account`} exact
         render={() => <Account {...this.props} /> } />
     </div>
    </div>

Может быть, я совершенно не в курсе этого.Я попытался найти помощь по этому вопросу в спектральном чате Next.js.

Любая помощь приветствуется.Спасибо!

1 Ответ

0 голосов
/ 29 октября 2018

Одно из решений, которое я могу придумать, - полностью оставить маршрутизацию для Next.js

Просто создайте следующую структуру папок 

pages/
  user/
    account.js
    dashboard.js
    listings.js
    // etc...
  user.js

Где каждый маршрут, например /user/account будет отображаться в соответствующем js-файле, например user/account.js

Пример /pages/user.js file 

import Link from 'next/link';

export default () => {
  return (
    <div>
      <h1>User page</h1>
      <ul>
        <li>
          Go to <Link href="/user/account">account</Link>
        </li>
      </ul>
    </div>
  );
}

/pages/user/account.js

export default () => {
  return <div>account</div>;
};

Возможно, мне не хватает именно того, что вы хотите реализовать, но надеюсь, что это поможет:)

...