通过 id 使用属性反应显示页面答案

【问题标题】：React display page with properties by its id通过 id 使用属性反应显示页面
【发布时间】：2019-02-28 06:44:00
【问题描述】：

所以我有多个项目，当我单击“查看项目”按钮时，我想显示一个页面，在该页面中我只能通过其 ID 看到一个项目信息（使用 MongoDB）

我的应用程序路由代码：

  <div className="App">
    <HashRouter>
      <div>
       <Navigation />
        <Switch>
          <Route exact path="/" component={Dashboard}/>
          <Route path="/projects" component={DisplayProjects}/>
         <Route path="/projects/:id" component={Project}/>
        </Switch>
      </div>
    </HashRouter>
  </div>

而我的页面只有 ID 信息：

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';

import './Project.css';

class Project extends Component {
  constructor(props) {
    super(props);
    this.state = {
        project: {}
    };
}
      
render() {

    return (
        <div className="Projects">
        <h1>
           {this.state.project.title}
        </h1>
        <h1>
           {this.state.project.typeOfProduction}
        </h1>
      </div>
       );
   }
}
export default Project;

我的 DisplayProjects 页面：

import React, { Component } from 'react';

import CardProjects from '../../components/pages/Projects/CardProjects/CardProjects';
import Project from '../../components/pages/Projects/Project/Project'

import './DisplayProjects.css';



class DisplayProjects extends Component {

constructor(props) {
    super(props);
    this.state = {
        projects: []
    };
}


componentDidMount() {
    fetch('/dashboard/projects')
        .then(response => {
            return response.json()
                .then(projects => {
                    console.log(projects);
                    this.setState({
                        projects: projects
                    });
                });
        });
}
render() {
    //  console.log("This.state.projects " + this.state.projects);
    const projects = this.state.projects.map(project => {
        return <CardProjects
        key={project._id}
        id={project._id}
        title={project.title}
        typeOfProduction={project.typeOfProduction}
        />
    });


    return (
        <div>
            <section className="DisplayProjects container">
                  {projects}
            </section>
        </div>
    );

}


export default DisplayProjects;

“查看项目”按钮链接路径是：

    <NavLink to={`/projects/${props.id}`}><button 
   type="button" className="btn btn-outline-secondary">See 
   Project</button></NavLink>

此 NavLink 有效！ 它显示为他们自己的 ID，但不会显示/呈现我的页面“项目”，仅显示该信息，仅显示在浏览器路径上

【问题讨论】：

标签： reactjs routes components

【解决方案1】：

在 DisplayProjects 路径中添加 exact 属性，否则 react-router 将显示以“projects”开头的所有路径的 DisplayProjects，因此也会显示“projects/1234”。

【讨论】：