反应路由器显示数据

Question

我正在尝试使用 React 路由器，但遇到了问题。当我单击 link 时，我希望它能使以前的数据消失，只显示当前数据。但在我的情况下，它既显示数据又无法通过 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

您只需要 1 个 Router 用于路由，而不是为每一行创建一个新的 Router。您需要使用 Switch 来仅渲染选定的 Route。 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>);
}

编辑：在收到评论后更正了代码中的错误。

反应路由器显示数据

React router show data

router

reactjs

react-router