web-dev-qa-db-fra.com

Obtenir l'url actuelle côté client dans next.js

Je travaille donc sur une application nodejs sur laquelle j'aurai mon nouveau site Web et je veux permettre à mon utilisateur côté client d'afficher différentes choses, de les restituer en fonction de ce sur quoi l'utilisateur appuie. Mon idée est que, par exemple, l'utilisateur verrait d'abord "Veuillez d'abord sélectionner un outil", puis l'utilisateur sélectionnera un outil dans la barre de navigation, puis la page sera à nouveau rendue et afficher l'outil sélectionné dans un jumbotron avec l'url étant changé par exemple puis/admin/[ToolSelected].

La seule chose est que je ne sais pas comment y parvenir. Je pensais que le code côté client pourrait détecter ce qu'est l'URL et est placé en tant que variable de page, puis l'outil s'affichera avec une instruction IF en fonction de la variable de page.

Ma théorie fonctionnerait-elle ou comment y parvenir de manière efficace?

Voici mon code de page principale:

// 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

Vous pouvez envelopper votre composant avec withRouter HOC, qui injectera l'objet router, qui a actuellement 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);

Modifier

Si vous préférez les hooks, vous pouvez utiliser useRouter hook.

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