Question

所以我有多个项目，当我单击“查看项目”按钮时，我想显示一个页面，在该页面上，只能通过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;

and the "See Project" button Link Route is:

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

此NavLink起作用！，它显示自己的ID，但不显示/仅显示该信息的页面“项目”，仅显示在浏览器路径上

你能帮我吗？

Answer 1

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

通过ID对属性进行显示的React页面

1 个答案: