React route dom

Question

私のポートフォリオの詳細ページを作成できますか？私はに関するいくつかの情報を表示したい私の詳細ページ

import React from 'react'; 

const Details = (props) => (

    <div className="main-content"> 

    <h2>Details Page</h2> 

    </div> 
); 

export default Details; 

ここ

import React from 'react'; 
import { 
    BrowserRouter, 
    Route, 
    Router, 
    Switch 
} from 'react-router-dom'; 

import Header from './Header'; 

import Home from './Home'; 

import About from './About'; 

import Teachers from './Teachers'; 

import Courses from './Courses'; 

import NotFound from './NotFound'; 

import Featured from './Featured'; 

import Portfolio from './Portfolio'; 

import Details from './Details'; 

import TeacherList from '../data/teachers'; 


const App = (props) => (

    <BrowserRouter> 

    <div className="container"> 
     <Header />  
     <Switch> 
     <Route exact path="/" component={Home} /> 
     <Route path="/about" render={() => <About title='About' /> } /> 
     <Route exact path="/teachers" component={Teachers} /> 
     <Route path="/teachers/:topic/:name" component={Featured} /> 
     <Route path="/courses" component={Courses} /> 
     <Route exact path="/portfolio" render={ (props) => <Portfolio title={TeacherList} {...props}/>} /> 
     <Route path="/portfolio/:id" component={Details} /> 
     <Route component={NotFound} /> 
     </Switch> 
    </div> 
    </BrowserRouter> 
); 

export default App; 

私portfolio.jsはここ

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

    const Portfolio = (props) => { 

    let TeacherList = props.title; 
    let teachers = TeacherList.map((teacher) => { 
     return (
     <li className="teacher" key={teacher.id} > 
      <img className="teacher-img" src={teacher.img_src} alt="teacher" /> 
      <NavLink to={`\portfolio/${teacher.id}`}> <h3>{teacher.name}</h3></NavLink> 
     </li> 
    ); 
    }); 

    return (
     <div className="main-content"> 
     <h2>Portfolio</h2> 
     <ul className="group"> 
      {teachers}  
     </ul> 
     </div> 
    ); 
    } 

    export default Portfolio; 

を提出されている： はここに私のルートと私のアプリケーションファイルであります私が先生の名前に鳴り響くとき、先生。たとえば、バイオを表示します。あなたがteacher_idをつかむと、あなたのデータを照会するためにそのIDを使用する必要がDetails.jsで

const TeacherList = [ 

    { 
    name: "Angie McAngular", 
    bio: "Angie is a web developer and teacher who is passionate about building scalable, data driven web apps, especially ones that address old problems with new tech!", 
    img_src: "#", 
    id: "teach-1" 
    }, 
    { 
    name: "NodeStradamus", 
    bio: "'NodeStra' is a software engineer and philosopher trying to leave the world better than he found it. He codes for non-profits, eCommerce, and large-scale web apps.", 
    img_src: "#", 
    id: "teach-2" 
    }, 
    { 
    name: "Geo 'Lo' Cation", 
    bio: "Geo is a JavaScript developer working on large-scale applications. He's also a teacher who strives to support students in removing all barriers to learning code.", 
    img_src: "#", 
    id: "teach-3" 
    }, 
    { 
    name: "Ecma Scriptnstuff", 
    bio: "Ecma found her passion for computers and programming over 15 years ago. She is excited to introduce people to the wonderful world of JavaScript.", 
    img_src: "#", 
    id: "teach-4" 
    }, 
    { 
    name: "Jay Query", 
    bio: "Jay is a developer, author of CSS: The Missing Manual, JavaScript & jQuery: The Missing Manual, and web development teacher.", 
    img_src: "#", 
    id: "teach-5" 
    }, 
    { 
    name: "Json Babel", 
    bio: "All of his professional life, Json has worked with computers online; he is a polyglot programmer and likes using the right tools for the job.", 
    img_src: "#", 
    id: "teach-6" 
    } 
]; 

export default TeacherList; 

Answer 1

：

データはこのファイルから来ています。この例では

export default class Details extends Component { 
    componentDidMount() { 
     getTeacherById(this.props.match.params.id) 
      .then(response => { 
       this.setState(prevState => { details: response.data }) 
     }); 
    } 
    render() { 
     return (
      <div className="main-content"> 
       <h2>Details Page</h2> 
       <p>{this.state.details.name}</p> 
       <p>{this.state.details.bio}</p> 
       <img src={this.state.details.img_src} /> 
      </div> 
     ) 
    } 
} 

、あなたは正しいデータを検索するためのIDを使用していますgetTeacherById関数を作成する必要があります。