web-dev-qa-db-ja.com

next.jsでクライアント側の現在のURLを取得する

そこで、私は新しいウェブサイトを作成するnodejsアプリに取り組んでいます。クライアント側のユーザーがさまざまなものを表示し、ユーザーが押しているものに応じて再レンダリングできるようにしたいと考えています。私の考えは、たとえば、最初にユーザーが「最初にツールを選択してください」と表示し、次にユーザーがナビゲーションバーでツールを選択すると、ページが再レンダリングされ、ジャンボトロン内で選択されたツールがURLで表示されますたとえば/ admin/[ToolSelected]に変更されました。

唯一のことは、これを達成する方法がわからないということです。クライアント側のコードがURLが何であるかを検出でき、ページ変数として配置されると、ページ変数が何であるかに応じてツールがIFステートメントで表示されると考えていました。

私の理論は機能するのでしょうか、またはこれを効率的な方法で実現するにはどうすればよいですか？

これが私のメインページのコードです：

// Including Navbar and css
import AdminLayout from '../comps/admin/adminLayout'

// the so called "tools" more will exist in the future
import Passform from '../comps/admin/tools/passform'


// Fetching the current url the user is on
var page = CURRENT_URL;


const jumbotron = {
  background: 'white'
}

const Admin = (page) => (

  <AdminLayout>

  <style global jsx>
  {
    `body {
      background: #eff0f3;
    }`
  }
  </style>
    <div className="jumbotron" style={jumbotron}>

    {(page == "passform") ? (
      <Passform/>
    ) : (
      <h3>Something is wrong :/ . {page}</h3>
    )}

    </div>
  </AdminLayout>
)

export default Admin
reactjsexpressnext.js
8
Linus J

withRouter HOCでコンポーネントをラップできます。これにより、現在のrouterを持つpathnameオブジェクトが挿入されます。

import { withRouter } from 'next/router';

const Admin = ({ router }) => (
  <AdminLayout>
    <style global jsx>
      {`
        body {
          background: #eff0f3;
        }
      `}
    </style>
    <div className="jumbotron" style={jumbotron}>
      {router.pathname == 'passform' ? <Passform /> : <h3>Something is wrong :/ . {page}</h3>}
    </div>
  </AdminLayout>
);

export default withRouter(Admin);

編集

フックを好む場合は、 useRouter フックを使用できます。

import { userRouter } from 'next/router';

const Admin = () => {
const router = useRouter();

return (
  <AdminLayout>
    <style global jsx>
      {`
        body {
          background: #eff0f3;
        }
      `}
    </style>
    <div className="jumbotron" style={jumbotron}>
      {router.pathname == 'passform' ? <Passform /> : <h3>Something is wrong :/ . {page}</h3>}
    </div>
  </AdminLayout>);
}
;

export default withRouter(Admin);
6
felixmosh