Next.js: Router.push с состоянием
Я использую next.js для перестройки приложения для рендеринга на стороне сервера. У меня есть кнопка, которая обрабатывает поисковый запрос.
В старом приложении обработчик был таким:
search = (event) => {
event.preventDefault();
history.push({
pathname: '/results',
state: {
pattern: this.state.searchText,
}
});
}
В классе результатов я мог получить дату состояния с помощью this.props.location.state.pattern.
Итак, теперь я использую next.js:
import Router, { withRouter } from 'next/router'
performSearch = (event) => {
event.preventDefault();
Router.push({ pathname: '/results', state: { pattern: this.state.searchText } });
};
В классе результатов я использую
static async getInitialProps({req}) {
return req.params;
}
Я не уверен, что мне нужно добавить это в мой server.js:
server.get('/results', (req, res) => {
return app.render(req, res, '/results', req.params)
})
Однако функция getInitialProps выдает ошибку, поскольку req не определен. Длинный текст, короткий вопрос: как передать состояние или параметры на другую страницу без использования параметров GET?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
В next.js вы можете передавать такие параметры запроса
Router.push({
pathname: '/about',
query: { name: 'Someone' }
})
а затем на следующей странице (здесь, на странице /about) извлеките query через реквизит router, который необходимо ввести в Component с помощью withRouter.
import { withRouter } from 'next/router'
class About extends React.Component {
// your Component implementation
// retrieve them like this
// this.props.router.query.name
}
export default withRouter(About)
такая же проблема здесь, когда он нажимает, он не загружает страницу с ошибкой не может прочитать свойство req.user (это то, что я пропускаю). но если я нажму обновить, он загружается
@ggnoredo, я предполагаю, что вы используете req.user в getInitialProps, но когда маршрутизация выполняется на стороне клиента, объекта req нет. req.user существует только тогда, когда Next.js рендерится на сервере.
@PrithweeDas этого не знал. Я переключился на параметр запроса. Большое спасибо!
У меня вопрос, сохраняется ли это состояние при перезагрузке страниц?
если вы говорите о параметрах запроса, то да, у вас будет ?name=Someone в вашем URL-адресе, и если вы обновитесь, все будет так же.
Это загрязняет УР. Разве нет такой функции, как реактивный маршрутизатор?
Нет такой функции. вы можете узнать больше об этом здесь github.com/zeit/next.js/issues/771 @UmakantPatil
похоже, это работает только для одиночных вложенных полей. Как быть с объектами, имеющими несколько вложенных полей?
@ZenVentzi Я не могу найти такую функцию, не знаю, имитирует ли это пакет. Обычно я использую локальное хранилище для сохранения объектов и извлечения их при необходимости. Просто убедитесь, что я регулярно убираю вещи, а не съедаю все пространство. Я надеюсь, что в будущем выпуске будет указано, когда переключение страниц выполняется на стороне клиента.
могу ли я передать объект?
Если вам нужны «чистые» URL-адреса, один из способов сделать это — добавить обработчик onClick к вашей ссылке и сохранить необходимую информацию в хранилище контекста/редукции. Это легко реализовать, если он у вас уже есть.
<Link href='...'>
<a onClick = {()=>{dispatch(....)}}>Link<a/>
<Link>
Вы не хотите помещать в Redux слишком много вещей. Если в этом состоянии заинтересованы только один или два компонента, лучше избегать Redux или использования контекста.
Да, это в основном взлом. Но поскольку отправка глубоко вложенных данных с помощью Next.js Router затруднена/невозможна, его применение ограничено.
В последней версии NextJS у нас есть hooks и в нашем случае useRouter
import { useRouter } from 'next/router'
function ActiveLink({ children, href }) {
const router = useRouter()
const handleClick = (e) => {
e.preventDefault()
router.push(href)
}
return (
<a href = {href} onClick = {handleClick}>
{children}
</a>
)
}
export default ActiveLink
и если вам нужен динамический корень, это так же просто, как указать его в параметрах строки:
<button type = "button" onClick = {() => router.push('/post/abc')}>
Click me
</button>
Как это помогает? Это не передача состояния, это просто переход по URL-адресу с использованием хуков.
js this.props.router.query.nameотображается -- Ошибка типа -- невозможно прочитать свойство 'запрос' неопределенного