CODEWITHSUNDEEP
reactjsreact-routerrouter
Marco Aurélio
Marco Aurélio

Reputation: 45

React router show data

I'm trying to use the react router, but I'm having trouble. When I click on the link I would like it to disappear the previous data and only the current data appears. But in my case it appears both data and also I can not access through the url. Can someone help me?

I'm trying to use the react router, but I'm having trouble. When I click on the link I would like it to disappear the previous data and only the current data appears. But in my case it appears both data and also I can not access through the url. Can someone help me?

My 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>   
    )
     

}

Upvotes: 1

Views: 48

Answers (1)

palsrealm
palsrealm

Reputation: 5243

You need only 1 Router for routing, instead of creating a new Router for each individual row. You need to use a Switch for rendering only the selected Route. The code for your renderRows can be modified as follows.

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: Corrected errors in code after comments received.

Upvotes: 1

Related Questions