Связывание страницы на той же странице с nextjs - PullRequest
Новая
       9

Связывание страницы на той же странице с nextjs

0 голосов
/ 25 января 2019

Привет всем, мне нужна помощь по поводу связывания страниц в nextjs. на самом деле я знаю, как связать, но я хочу следующее: У меня есть домашняя страница с контактными ссылками команды курса в navbar, поэтому, когда я нажимаю курс, открывается страница курса с 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>

1 Ответ

0 голосов
/ 28 января 2019

Вы можете попробовать вот так:

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 импортировать React, {Component} из 'response' 

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