React routeur afficher les données

Question

J'essaie d'utiliser le routeur de réaction, mais j'ai des problèmes. Lorsque je clique sur le lien, je voudrais qu'il disparaisse les données précédentes et que seules les données actuelles apparaissent. Mais dans mon cas, il apparaît à la fois des données et aussi je ne peux pas accéder à travers l'URL. Est-ce que quelqu'un peut m'aider? J'essaie d'utiliser le routeur de réaction, mais j'ai des problèmes. Lorsque je clique sur le lien, je voudrais qu'il disparaisse les données précédentes et que seules les données actuelles apparaissent. Mais dans mon cas, il apparaît à la fois des données et aussi je ne peux pas accéder à travers l'URL. Est-ce que quelqu'un peut m'aider?

Mon code:

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

Vous devez seulement 1 Router pour le routage, au lieu de créer une nouvelle Router pour chaque ligne individuelle. Vous devez utiliser un Switch pour restituer uniquement le Route sélectionné. Le code de votre renderRows peut être modifié comme suit.

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

Edit: les erreurs corrigées dans le code après les commentaires reçus.