Реагировать на страницу отображения со свойствами по ее идентификатору - PullRequest
Новая
       11

Реагировать на страницу отображения со свойствами по ее идентификатору

0 голосов
/ 24 сентября 2018

Итак, у меня есть несколько проектов, и когда я нажимаю кнопку «Просмотреть проект», я хочу отобразить страницу, на которой я могу видеть только одну информацию о проекте по ее идентификатору (используя 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>

и моя страница, которая имеет информацию только по идентификатору: 

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 работает! у него есть собственный идентификатор, но он не отображается / не отображается на моей странице "Проект" только с этой информацией, он отображается только в маршруте браузера

Можете ли вы мне помочь?

enter image description here

1 Ответ

0 голосов
/ 24 сентября 2018

Добавить exact свойство в Маршрут DisplayProjects, иначе react-router будет отображать DisplayProjects для всех маршрутов, начинающихся с 'projects', поэтому также 'projects / 1234'.

...