React: How to direct new page - reactjs

Question

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.

Answer 1

Issues
You are wrapping each PokemonCard with it's own Router, you need only 1 single Router wrapping the entire app.
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>
);
}

Answer 2

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>