在next.js中获取客户端的当前URL

Question

所以我正在开发一个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

Answer 1

您可以使用qazxsw poi HOC包装您的组件，这将注入具有当前withRouter的qazxsw poi对象。

router