I am beginner in React js. I am developing projects about getting pokemons with API from pokeApi. I was able to get all pokemons(name,id, and image) from there. However I want to get more detail. When I click one pokemon I want to see more detail about it.

This is my PokemonCard.js

 <Router>    
    <StyledLink to={`pokemon/${this.state.pokemonIndex}`}>
        <Card className="card">
         <h5 className="card-header">{this.state.pokemonIndex}</h5>
           .
           .
           .
       </Card>
  </StyledLink>
</Router>

When I click one pokemon the url changes from localhost:3000 to http://localhost:3000/pokemon/7. However, nothing shows up.

this is my Pokemon.js

    import axios from 'axios';
    import React, { Component } from 'react'

  export default class Pokemon extends Component {

 state = {
    name: '',
    pokemonIndex: '',
    imageUrl: ''
};

async componentDidMount() {
    const { pokemonIndex } = this.props.match.params;

    // Urls for pokemon information
    const pokemonUrl = `https://pokeapi.co/api/v2/pokemon/${pokemonIndex}/`;
    const pokemonSpeciesUrl = `https://pokeapi.co/api/v2/pokemon-species/${pokemonIndex}/`;

    //get information about pocekoms

    const pokemonRes = await axios.get(pokemonUrl);
    const name = pokemonRes.data.name;
    this.setState({name})
}
render() {
    return (
        <div>
            <h1>{this.state.name}</h1>
        </div>
    )
 }

}

What did I wrong? Please explain to me. I am beginner in this language. Thanks for your time and help.

CodePudding user response：

Issues

1. You are wrapping each PokemonCard with it's own Router, you need only 1 single Router wrapping the entire app.
2. You've not any Route components rendering the UI.

Solution

index.js - Import a Router and wrap the app.

import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);

App.js - Render the UI components into Route components within a Switch so only a single route is rendered at-a-time.

...
import { Switch, Route } from "react-router-dom";
import Pokemon from "./components/pokemon/Pokemon";
...

function App() {
  return (
    <div className="App">
      <NavBar />
      <div className="container">
        <Switch>
          <Route path="/pokemon/:pokemonIndex" component={Pokemon} />
          <Route path="/">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </div>
  );
}

PokemonCard.js - Remove the extraneous Router components.

...
render() {
  return (
    <div className="col-md-3 col-sm-6 mb-5">
      <StyledLink to={`pokemon/${this.state.pokemonIndex}`}>
        <Card className="card">
          ...
        </Card>
      </StyledLink>
    </div>
  );
}

CodePudding user response：

I think you are missing Route with the routes you want your component to be rendered

<Switch>
          <Route exact path="pokemon/:id">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>