リアクタのショーデータ

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を必要としています。選択したものだけをレンダリングする場合はSwitchを使用する必要があります。RouterenderRowsのコードは次のように変更できます。

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>); 
 
}

編集：受け取ったコメントの後に、コード内のエラーを修正しました。