render(
<Router>
<Switch>
<Route exact path="/" component = { Home } />
<Route exact path="/gallery" component = { Gallery } />
<Route exact path="/details" component = { Details } />
</Switch>
</Router>,
// Define your router and replace <Home /> with it!
document.getElementById('app')
);
这是我的网络应用程序的路由
return data.map((eachData, index) => {
return ( <Link to={{ pathname: '/details/' + this.state.selectedKey }}><PokemonInfo poke={ eachData } key={ index } /></Link> );
});
};
这是我在移动到另一个链接时尝试链接到 /details 页面的代码部分。我想传入一个数字(不是状态。与我的示例代码不同)。
简而言之,我想将 2 传入链接,并使其直接指向 /details/2,然后在 details.jsx 组件中检索该“2”。
我怎样才能做到这一点?
编辑:详细信息
类详细信息扩展了 React.Component {
constructor() {
super();
this.state = {
pokemon: []
};
};
componentWillMount() {
// Called first time the comp is loaded right before the comp is added to the page
console.log('Component WILL MOUNT!')
console.log("passed" , this.props.match.params.id)
var url = "https://pokeapi.co/api/v2/pokemon/" + this.props.match.params.id;
axios.get(url)
.then((response) => {
// setState re-renders component
this.setState({
pokemon: response.data
})
console.log(this.state.pokemon)
})
.catch((error) => {
console.log(error);
})
}
render() {
return (
<Card className = "PokemonView">
<Card.Content>
<Card.Header className = "PokemonView_header">
{ this.state.pokemon.name }
</Card.Header>
<Card.Meta>
Pokedex #{ this.state.pokemon.id }
</Card.Meta>
<Card.Meta>
Height { this.state.pokemon.height }
</Card.Meta>
<Card.Meta>
Weight { this.state.pokemon.weight }
</Card.Meta>
</Card.Content>
</Card>
);
}
}
导出默认详细信息