在 next.js 中获取客户端的当前 url [英] Getting the current url on the client side in next.js
问题描述
所以我正在开发一个 nodejs 应用程序,我将在该应用程序上安装我的新网站,并且我想为客户端的用户提供一种显示不同内容的方式,并根据用户按下的内容重新呈现.我的想法是,例如,首先用户会看到请先选择一个工具",然后用户将在导航栏中选择一个工具,然后页面将被重新渲染并显示在 jumbotron 内选择的工具,其 url 为例如然后更改/admin/[ToolSelected].
唯一的问题是我不知道如何实现这一点.我在想客户端代码可以检测到 url 是什么并将其作为页面变量放置,然后该工具将根据页面变量的内容显示一个 IF 语句.
我的理论是否可行,或者如何以有效的方式实现这一目标?
这是我的主页代码:
//包括导航栏和css从../comps/admin/adminLayout"导入 AdminLayout//所谓的工具"更多将在未来存在从../comps/admin/tools/passform"导入密码//获取用户当前所在的urlvar page = CURRENT_URL;常量 jumbotron = {背景:白色"}const Admin = (page) =>(<管理布局><风格全局 jsx>{`身体{背景:#eff0f3;}`}</风格><div className="jumbotron" 样式={jumbotron}>{(page == "passform") ?(<通行证/>) : (<h3>出了点问题:/.{page}</h3>)}</div></管理布局>)导出默认管理员
你可以用 withRouter
HOC,将注入具有当前 pathname
的 router
对象.
import { withRouter } from 'next/router';const Admin = ({ 路由器 }) =>(<管理布局><风格全局 jsx>{`身体 {背景:#eff0f3;}`}</风格>编辑
如果你更喜欢钩子,你可以使用 useRouter
钩子.
import { useRouter } from 'next/router';const Admin = () =>{常量路由器 = useRouter();返回 (<管理布局><风格全局 jsx>{`身体 {背景:#eff0f3;}`}</风格>So I am working on a nodejs app which I will have my new website on and I want to make a way for my user on the clientside to display different things, re-renderd depending on what the user is pressing on. My idea is that for example firstly the user would see "Please select a tool first" and then the user will select a tool in the navbar which then the page will be re-renderd and display the tool selected inside a jumbotron with the url being changed for example then /admin/[ToolSelected].
The only thing is tho that I do not know how to achieve this. I was thinking that the client side code could detect what the url is and is placed as a page variable then the tool will displayed with a IF statement depending on what the page variable is.
Would my theory work or how can a achieve this in an efficient way?
Here is my main page code:
// 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
解决方案 You can wrap your component with withRouter
HOC, that will inject the router
object, that has current 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);
Edit
If you prefer hooks you can use useRouter
hook.
import { useRouter } 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 Admin;
这篇关于在 next.js 中获取客户端的当前 url的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文