反应路由器显示数据

Posted 2023-02-22

【中文标题】反应路由器显示数据

【英文标题】：React router show data

【发布时间】：2018-03-22 13:08:10

【问题描述】：

我正在尝试使用 react 路由器，但遇到了问题。当我点击链接时，我希望它消失以前的数据，只显示当前数据。但在我的情况下，它出现了数据，而且我也无法通过 url 访问。有人可以帮我吗？

我正在尝试使用 react 路由器，但遇到了问题。当我点击链接时，我希望它消失以前的数据，只显示当前数据。但在我的情况下，它出现了数据，而且我也无法通过 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>   
    )
     

【参考方案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>);

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

【讨论】：

现在它显示这个错误 app.js:9234 Uncaught Error: Component(...): A valid React element (or null) must be returned。您可能返回了未定义、数组或其他一些无效对象。

我也编辑了我的代码，它缺少一部分，但我试图更改它，但它没有工作。和我现在输入的其他代码有关系吗？

你应该在componentDidMount而不是在构造函数中调用api。