React router show data

Question

반응 라우터를 사용하려고하는데 문제가 있습니다. 링크를 클릭하면 이전 데이터가 사라지고 현재 데이터 만 표시됩니다. 하지만 내 경우에는 두 데이터로 표시되며 또한 URL을 통해 액세스 할 수 없습니다. 누군가 나를 도울 수 있습니까?

반응 라우터를 사용하려고하는데 문제가 있습니다. 링크를 클릭하면 이전 데이터가 사라지고 현재 데이터 만 표시됩니다. 하지만 내 경우에는 두 데이터로 표시되며 또한 URL을 통해 액세스 할 수 없습니다. 누군가 나를 도울 수 있습니까?

내 코드 :

import React, {Component} from 'react' 
 
import axios from 'axios' 
 

 
import ShotList from './shotList' 
 

 

 
const URL = 'https://api.dribbble.com/v1/shots/' 
 
const token = 'token' 
 

 
export default class Shots extends Component{ 
 

 
    constructor(props){ 
 
     super(props) 
 
     this.state = {list: []} 
 
     
 
     this.getShots() 
 
    } 
 
    
 
    getShots(){ 
 
     axios.get(`${URL}?access_token=${token}`) 
 
     .then(resp => this.setState({...this.state, list: resp.data}))  
 
    } 
 

 
    render(){ 
 
     return(
 
      <div> 
 
       
 
       <ShotList list={this.state.list}/> 
 
       
 
       </div> 
 
     ) 
 
    } 
 
}

import React from 'react' 
 
import {BrowserRouter as Router, Route, Link} from 'react-router-dom' 
 

 
export default props =>{ 
 
    
 

 
    const renderRows =() =>{ 
 
     const list = props.list || [] 
 
     JSON.stringify(list) 
 
     return list.map(shots =>(
 
     <Router key={shots.id}> 
 
      <div > 
 
      <Link to={`/shots/${shots.id}`}> 
 
       <div className='col-md-3 col-sm-4 col-xs-6 teste'> 
 
        <img src={shots.images.normal} className='img-responsive' /> 
 
        <p>{shots.views_count}</p> 
 
       </div> 
 
       </Link> 
 
       <Route path="/shots/:shotsId" component={Detail}/> 
 
       </div> 
 
        
 
     </Router> 
 

 
     
 
     )) 
 
     
 
     
 
} 
 

 
const Detail = ({match}) =>{ 
 
    
 
    return(
 
     <div> 
 
      {match.params.shotsId} 
 
      
 
      </div> 
 
    ) 
 
    
 

 
} 
 

 
    return(
 
     <div> 
 
      {renderRows()} 
 
     </div> 
 
    ) 
 
     
 

 
}

Answer 1

는 대신 각 행에 대해 새로운 Router을 만드는, 단 1 Router 라우팅이 필요합니다. 선택된 Route 만 렌더링하려면 Switch을 사용해야합니다. renderRows의 코드는 다음과 같이 수정할 수 있습니다.

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

 
export default props =>{ 
 
    const renderRows =() =>{ 
 
    const list = props.list || [] 
 
    JSON.stringify(list) 
 
    return (
 
    <Router> 
 
     <div> 
 
     {list.map(shots => 
 
      <Link to={`/shots/${shots.id}`}> 
 
      <div className='col-md-3 col-sm-4 col-xs-6 teste'> 
 
       <img src={shots.images.normal} className='img-responsive' /> 
 
       <p>{shots.views_count}</p> 
 
      </div> 
 
      </Link>) }   
 
     
 
     <Switch> 
 
      {list.map(shots =><Route path="/shots/:shotsId" component={Detail}/>)} 
 
     </Switch> 
 
     </div>     
 
     </Router>); 
 
}

편집 : 의견은 수신 된 코드에서 수정 된 오류 후.