Получение текущего URL-адреса на стороне клиента в next.js
Итак, я работаю над приложением 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
Вы можете обернуть свой компонент 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 { 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;
Я не уверен, почему минусы? import {withRouter} from 'next/router'; теперь является частью ответа. Это вместе с export default withRouter(Admin); отлично сработало. PS. Инспектор React был быстрым способом проверки.
Голосование против, потому что это непригодный для использования пример, удаляет некоторые детали из вопроса, что делает его более ясным, и ему не хватает глубины в объяснении того, что на самом деле здесь происходит.
Я изменил реализацию, чтобы использовать router.pathname
Я думаю, ты хочешь
import {withRouter } from 'next/router';