我正在使用一个API的在线教程，我认为它与我使用的路由器有关，而不是教程的HashBrowser路由器。但有人能解释一下为什么这不起作用吗?
App.js
import React, {Component} from 'react'
import { BrowserRouter, Route, Routes} from 'react-router-dom'
import Navbar from './components/Navbar'
import PkmnList from './components/PkmnList'
import PkmnStats from './components/PkmnStats'
class App extends Component{
render(){
return (
<BrowserRouter>
<div className="w-full h-full bg-platnium">
<Navbar/>
<Routes>
<Route exact path="/" element={<PkmnList/>} />
<Route exact path="/pokemon/:index" element={<PkmnStats/>} />
</Routes>
</div>
</BrowserRouter>
)
}
}
export default App;
PkmnCard.js
import React, { Component } from 'react'
import loading from './loading.gif'
import {Link} from 'react-router-dom'
export default class PkmnCard extends Component {
state = {
name:'',
url: '',
index:'',
}
componentDidMount () {
const { name , url} = this.props;
const index = url.split('/')[url.split('/').length - 2];
const sprite =`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${index}.png`;
this.setState({
name,
index,
sprite
})
}
render() {
return (
<Link to={`pokemon/${this.state.index}`}>
<div className='flex flex-col h-64 items-center p-10 rounded-xl shadow-lg hover:shadow-2xl hover:border-stone-700 bg-white select-none '>
<h3 className=' text-center'>{this.state.name.toLowerCase().split(' ').map(letter => letter.charAt(0).toUpperCase() + letter.substring(1)).join(' ')}</h3>
<h1>{this.state.url}</h1>
{this.state.imageLoading ? (<img src={loading} className="mx-auto w-10 h-10" alt="loading gif"/>) :null}
<img className='mx-auto' style={this.state.tooManyRequests ? {display: "none"} : this.state.imageLoading ? null : {display: "block"}} src={this.state.sprite} alt={this.state.name} onLoad={() => this.setState({imageLoading: false})} onError={ () => this.setState({ tooManyRequests: true})} />
{this.state.tooManyRequests ? (<h6 className='mx-auto bg-red-600'> <span className='text-white'>Too Many Requests </span></h6>) :null }
<h3 className="text-center">-No.{this.state.index}-</h3>
</div>
</Link>
)
}
}
PkmnStats.js
import React, {Component} from 'react'
import axios from 'axios'
import { useParams } from 'react-router-dom';
export default class PkmnStats extends Component {
state = {
name:'',
index:'',
imageUrl:''
};
async componentDidMount(){
const {index} = this.props.match.params;
const pkmnUrl = `https://pokeapi.co/api/v2/pokemon/${index}/`
//const pkmnSpecies = `https://pokeapi.co/api/v2/pokemon-species/${index}/`
const pkmnResponse = await axios.get(pkmnUrl);
const name = pkmnResponse.data.name;
this.setState({ name });
}
render(){
return (
<div>
<h1>{this.state.name}</h1>
</div>
)
}
}
我读到使用useParams()，但我不能使用一个函数调用，对吗?我困惑和卡住如何解决这个问题。有人能给我指个正确的方向吗?
我在处理类状态时遇到了问题，有时问题来自于类状态的定义以及如何将道具传递给子对象。也许可以尝试在类的顶层添加一个带有super(props)的构造函数。
//State setup
constructor(props) {
super(props)
this.state={
// Your setup
}
}