Получение текущего URL на стороне клиента в next.js - PullRequest
Новая
       7

Получение текущего URL на стороне клиента в next.js

0 голосов
/ 23 февраля 2019

Итак, я работаю над приложением nodejs, на котором у меня будет новый веб-сайт, и я хочу, чтобы мой пользователь на клиентской стороне отображал разные вещи, перерисованные в зависимости от того, на что нажимает пользователь.Моя идея состоит в том, что, например, сначала пользователь увидит «Сначала выберите инструмент», а затем пользователь выберет инструмент на панели навигации, который затем будет перерисован, и отобразит инструмент, выбранный внутри jumbotron с указанием 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

1 Ответ

0 голосов
/ 24 февраля 2019

Вы можете обернуть свой компонент с withRouter HOC, который будет вводить объект router, который имеет ток pathname. 

import {withRouter} from 'next/router';

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 withRouter(Admin);
...