Next.js: 라우터.의욕적으로 추진하다

Next.js: 라우터.의욕적으로 추진하다

서버 측 렌더링용 앱을 재구축하기 위해 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;
}

서버에 추가할 필요가 있는지 잘 모르겠습니다.js:

server.get('/results', (req, res) => {
    return app.render(req, res, '/results', req.params)
})

단, getInitialProps 함수는 req가 정의되지 않았기 때문에 오류를 발생시킵니다.긴 텍스트, 짧은 질문: GET 파라미터를 사용하지 않고 상태 또는 파라미터를 다른 페이지로 넘기는 방법

인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)

URL을 깨끗한 상태로 유지하고 싶다면 Prithwee Das의 답변에 다음과 같이 약간 추가합니다.

Router.push({
    pathname: '/about',
    query: { name: 'Someone' }
}, '/about');

이제 소품을 사용하여 컴포넌트의 소품에 액세스할 수 있습니다.

...

const YourComponent = (props) => {
    useEffect(() => {
        console.log(props.router.query.name);
    }, [props.router.query]);

    return (
        <React.Fragment>
            ...
        </React.Fragment>
    );
};

...

SSR를 지원하는지 알 수 없지만 오류를 피하기 위해 다음과 같이 해야 했습니다.cannot read property 'query' of undefined.

이 방법에서는useRouter훅을 사용하여 URL에 액세스합니다.다음과 같이 Import 됩니다.

import { useRouter } from 'next/router'

데이터를 전달하고 싶다고 가정합니다.{name:'Someone'}부터Component A로.Component B.

인Component A,

const router = useRouter();

router.push(
  { pathname: "/path_of_component_b", query: { name: "Someone" } },
  "path_of_component_b"
);

인Component B,

const router = useRouter();

useEffect(() => {
  alert(router.query.name); // Alerts 'Someone'
}, [router.query]);

'깨끗한' URL을 원하는 경우 링크에 onClick 핸들러를 추가하고 컨텍스트/redux 저장소에 필요한 정보를 저장하는 방법이 있습니다.이미 도입이 끝난 경우, 실장은 간단합니다.

<Link href='...'>
  <a onClick={()=>{dispatch(....)}}>Link<a/>
<Link>

언급URL : https://stackoverflow.com/questions/55182529/next-js-router-push-with-state