javascript - 与nextjs在同一页面上链接页面
问题描述
大家好,我需要关于在 nextjs 中链接页面的帮助。实际上我知道如何链接,但我想要的是:我的主页在导航栏中有课程团队联系链接,所以当我点击课程时,课程页面会打开,网址为“localhost:3000/course”,在该课程页面中我有课程。我希望通过单击课程页面中的任何课程,它应该打开,并且 url 应该是“localhost:3000/course/course_1”。
我该怎么办 ?
这是标题组件:
const Header = () => (
<div>
<nav className="navbar navbar-expand-lg navbar-dark" >
<Logo />
<button className="navbar-toggler" type="button" data-target="#navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse">
<ul className="navbar-nav">
<li>
<a href="/" className="nav-link" >Home</a>
</li>
<li>
<a href="/team" className="nav-link" >Team</a>
</li>
<li>
<a href="/courses" className="nav-link" >Course</a>
</li>
<li >
<a href="/contact" className="nav-link" >Contact</a>
</li>
</ul>
<form className="form-inline my-2 my-lg-0">
<div className="d-flex justify-content-center h-100">
<div className="searchbar">
<input className="search_input text-center" type="text" name="" placeholder="Search..." />
<a href="#" className="search_icon"><i className="fas fa-search"></i></a>
</div>
</div>
</form>
</div>
</nav>
这是课程:
const Course = () => (
<div>
<div className="col-xs-12 col-sm-4">
<div className="card">
<a className="img-card img-part-2" href="#">
<img src="/static/course1-img.jpg" />
</a>
<div className="teacher-img">
<div className="ava">
<img alt="Admin bar avatar" src="http://ivy-school.thimpress.com/demo-3/wp-content/uploads/learn-press-profile/5/2448c53ace919662a2b977d2be3a47c5.jpg" className="avatar avatar-68 photo" height="68" width="68" />
</div>
</div>
<div className="card-content">
<p className="card-para">Charlie Brown </p>
<h4 className="card-title">
<a href="/Pyhton">
Learn Python – Interactive <br/> Python
</a>
</h4>
<div className="info-course">
<span className="icon1&-txt">
<i className="fas fa-user"></i>
3549
</span>
<span className="icon2&-txt">
<i className="fas fa-tags"></i>
education
</span>
<span className="icon3&-txt">
<i className="fas fa-star"></i>
0
</span>
</div>
</div>
</div>
</div>
解决方案
你可以这样尝试:
服务器.js
const express = require('express')
const next = require('next')
const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
app.prepare().then(() => {
const server = express()
server.get('/course', (req, res) => {
return app.render(req, res, '/courses')
})
server.get('/course/:id', (req, res) => {
return app.render(req, res, '/course', { id: req.params.id })
})
server.get('*', (req, res) => {
return handle(req, res)
})
server.listen(port, err => {
if (err) throw err
console.log(`> Ready on http://localhost:${port}`)
})
})
course.js
import React, { Component } from 'react'
export default class extends Component {
static getInitialProps ({ query: { id } }) {
return { courseId: id }
}
render () {
return (
<div>
<h1>Course {this.props.courseId}</h1>
</div>
)
}
}
course.js 导入 React, { Component } from 'react'
export default class extends Component {
render () {
return (
<div>
<a href="/course/python">
Learn Python – Interactive <br/> Python
</a>
<a href="/course/javascript">
Learn Javascript – Interactive <br/> Javascript
</a>
</div>
)
}
}
推荐阅读
- reactjs - 如何去掉material-ui select的下划线?
- python - cornflakes-linter(VSCode 中的 flake8)在 ~/.vscode/.... 目录(VSCode 扩展)中报告 Python 文件中的问题
- python - 如何在 Django 中打开和读取 FileField 类型的文件?
- python - AWS 到雪花的自动时间转换
- sql - 跟踪员工在办公室时间查询 - Oracle SQL Developer
- unity3d - 下拉选项复制到其他场景的下拉列表 - Unity3d
- python - 移动到其他文件夹后,Docker 在 FastApi 中看不到应用程序
- c# - 如何在 CEF 中配置浏览器以加载下一个
- google-cloud-platform - 如何为数据流作业指定受防护的 VM 和安全启动?
- pytorch - 用不同形状的张量计算余弦距离