问将同一页上的页面与nextjs链接
EN

Stack Overflow用户

提问于 2019-01-25 03:13:16

回答 1查看 3.9K关注 0票数 2

大家好，大家好，我需要大家的帮助，链接到nextjs中的页面。实际上，我知道如何链接，但我想要的是:我有我的主页有课程团队联系链接在导航栏，所以当我点击课程，然后课程页面打开与url "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>
                  &nbsp;&nbsp;3549
               </span>

               <span className="icon2&-txt">
                 <i className="fas fa-tags"></i>
                 &nbsp;&nbsp;education
               </span>

               <span className="icon3&-txt">
                  <i className="fas fa-star"></i>
                  &nbsp;&nbsp;0
               </span>
           </div>
        </div>
     </div>
  </div>

next.js

javascript

reactjs

mongodb

express

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-01-27 20:57:22

你可以这样做：

server.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>
    )
  }
}

courses.js导入响应，{ Component }从“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>
    )
  }
}