初步学习next.js-2-组件，路由，传递参数
<p><span style="font-size: 18pt">pages和components</span></p><p><span style="font-size: 14px"> 1.直接在根目录下的<code>pages</code>文件夹下，新建一个<code>jsyang.js</code>页面，启动后 访问路径为/jsyang</span></p>
<p><span style="font-size: 14px"> 2.在根目录下新建文件夹components,新建组件com1.js文件，</span></p>
<div class="cnblogs_code">
<pre>export <span style="color: rgba(0, 0, 255, 1)">default</span> ({children})=><button>{children}</button></pre>
</div>
<p> 在需要引入的页面中</p>
<div class="cnblogs_code">
<pre>import Com1 from '../components/com1'</pre>
</div>
<p> 直接写</p>
<div class="cnblogs_code">
<pre><Jspang>按钮</Jspang></pre>
</div>
<p> </p>
<p><span style="font-size: 18pt">路由和跳转</span></p>
<p><span style="font-size: 14pt"> 标签式导航</span></p>
<div class="cnblogs_code">
<pre>import Link from 'next/link'</pre>
</div>
<div class="cnblogs_code">
<pre>import Link from 'next/link'<span style="color: rgba(0, 0, 0, 1)">
export </span><span style="color: rgba(0, 0, 255, 1)">default</span> ()=><span style="color: rgba(0, 0, 0, 1)">(
</span><>
<div>A page </div><br> // link标签里必须家<a></a>
<Link href="/"><a>返回首页</a></Link>
</>
)</pre>
</div>
<p> <span style="font-size: 14pt">Router模块进行跳转</span></p>
<div class="cnblogs_code">
<pre>import Router from 'next/router'</pre>
</div>
<div class="cnblogs_code">
<pre> <div>
<button onClick={()=>{Router.push('/jspangA')}}>去A页面</button>
</div></pre>
</div>
<p> </p>
<p><span style="font-size: 18pt">传递和接收参数</span></p>
<p><span style="font-size: 18pt"> <span style="font-size: 14pt">传递参数，只能用query来传递</span></span></p>
<div class="cnblogs_code">
<pre>import Router from 'next/router'</pre>
<pre><code class="language-js"><span class="hljs-keyword">import Link <span class="hljs-keyword">from <span class="hljs-string">'next/link'</span></span></span></code></pre>
</div>
<div class="cnblogs_code">
<pre><Link href="/xiaojiejie?name=aaaa"><a>aaaa</a></Link><br/</pre>
</div>
<div class="cnblogs_code">
<pre>Router.push('/xiaojiejie?name=井空')</pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">Router.push({
pathname:</span>'/xiaojiejie'<span style="color: rgba(0, 0, 0, 1)">,
query:{
name:</span>'井空'<span style="color: rgba(0, 0, 0, 1)">
}
})</span></pre>
</div>
<div class="cnblogs_code">
<pre><Link href={{pathname:'/xiaojiejie',query:{name:'aaa'}}}><a>aaa</a></Link><br/></pre>
</div>
<p> <span style="font-size: 14pt">接收参数</span></p>
<div class="cnblogs_code">
<pre>import { withRouter} from 'next/router'<span style="color: rgba(0, 0, 0, 1)">
const Xiaojiejie </span>= ({router})=><span style="color: rgba(0, 0, 0, 1)">{
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
</span><>
<div>{router.query.name},来为我们服务了 .</div>
</>
<span style="color: rgba(0, 0, 0, 1)"> )
}
export </span><span style="color: rgba(0, 0, 255, 1)">default</span> withRouter(Xiaojiejie)</pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/lxz-blogs/p/13151614.html
頁:
[1]