反应路由器如何单击以详细了解组件
[英] React router how to click thru to detail components
本文介绍了反应路由器如何单击以详细了解组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两个组件 Car 和 CarDetails我想用超链接/链接显示汽车组件中的所有汽车，当用户单击时，它应该将 carid(param(s)) 传递给 CarDetails 组件
App.js
import React, { Component } from 'react';从./components/Cars"导入汽车；从./components/Car-details"导入 CarDetails进口 {BrowserRouter 作为路由器，路线，关联来自'反应路由器-dom'类 App 扩展组件 {使成为() {常量数据 = [{编号:1，名称:本田雅阁 Crosstour"，年份:'2017',型号:'Accord Crosstour',制作:'本田'},{编号:2，名称:梅赛德斯-奔驰 AMG GT Coupe"，年份:'2016',型号:'AMG',制造:'梅赛德斯奔驰'}];返回 (<div className="应用程序"><小时/><汽车 varCars={data}/>
);}}导出默认应用程序；
汽车.js此组件显示所有带有超链接的汽车，单击时会调用carnama.js 显示该特定汽车的详细信息
import React, { Component } from 'react';进口 {BrowserRouter 作为路由器，路线，关联来自'反应路由器-dom';从 './Carnama' 导入 Carnama类汽车扩展组件{构造函数(道具){超级(道具)}使成为(){const 汽车 = this.props.varCars;const carNode = cars.map((car) => {返回 (<路由器><div><链接to={{ 路径名:'/Carnama/'+car.id}}className="列表组项"key={car.id}>{车名}</链接><Route path="/Carnama:id" component={Carnama}/>
</路由器>)});返回 (<div><h1>汽车页面</h1><div className="list-group">{汽车节点}
);}}导出默认汽车；
Carnama.js此组件显示传递的参数 car.id
import React, { Component } from 'react';类 Carnama 扩展组件 {使成为() {返回 (<div><h1>汽车详情</h1>
);}}导出默认 Carnama；
我已阅读并重新阅读以下内容https://reacttraining.com/react-router/web/example/url-参数https://jaketrent.com/post/access-route-params-react-router-v4/
解决方案
您的问题与此块有关:
const carNode = cars.map((car) => {返回 (<路由器><div><链接to={{ 路径名:'/Carnama/'+car.id}}className="列表组项"key={car.id}>{车名}</链接><Route path="/Carnama:id" component={Carnama}/>
</路由器>)});
Array.map 将返回一个新的 React 组件数组，每个组件都包含在一个
const carNode = cars.map((car, i) => {返回 (<div key={i}><链接to={{ 路径名:'/Carnama/'+car.id}}className="列表组项"key={car.id}>{车名}</链接>)});返回 (<div><h1>汽车页面</h1><div className="list-group"><路由器>{汽车节点}<Route path="/Carnama:id" component={Carnama}/></路由器>
);
I have two components Car and CarDetails
I want to display all cars in the cars component with a hyperlink /link to and when the user clicks it should pass carid(param(s))to CarDetails component
App.js
import React, { Component } from 'react';
import Cars from './components/Cars';
import CarDetails from './components/Car-details'
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'
class App extends Component {
render() {
const data = [
{
id: 1,
name: 'Honda Accord Crosstour',
year: '2017',
model: 'Accord Crosstour',
make: 'Honda'
},
{
id: 2,
name: 'Mercedes-Benz AMG GT Coupe',
year: '2016',
model: 'AMG',
make: 'Mercedes Benz'
}
];
return (
<div className="App">
<hr/>
<Cars varCars={data}/>
</div>
);
}
}
export default App;
Cars.js
This component displays all the cars with a hyperlink when clicked will call
carnama.js which display details for that specific car
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom';
import Carnama from './Carnama'
class Cars extends Component {
constructor(props) {
super(props)
}
render(){
const cars = this.props.varCars;
const carNode = cars.map((car) => {
return (
<Router>
<div>
<Link
to={{ pathname: '/Carnama/'+car.id}}
className="list-group-item"
key={car.id}>
{car.name}
</Link>
<Route path="/Carnama:id" component={Carnama}/>
</div>
</Router>
)
});
return (
<div>
<h1>Cars page</h1>
<div className="list-group">
{carNode}
</div>
</div>
);
}
}
export default Cars;
Carnama.js
this component displays the passed paramater car.id
import React, { Component } from 'react';
class Carnama extends Component {
render() {
return (
<div>
<h1>Car Details</h1>
</div>
);
}
}
export default Carnama;
I have read and re-read the following
https://reacttraining.com/react-router/web/example/url-params
https://jaketrent.com/post/access-route-params-react-router-v4/
解决方案
Your issue is with this block:
const carNode = cars.map((car) => {
return (
<Router>
<div>
<Link
to={{ pathname: '/Carnama/'+car.id}}
className="list-group-item"
key={car.id}>
{car.name}
</Link>
<Route path="/Carnama:id" component={Carnama}/>
</div>
</Router>
)
});
Array.map will return a new array of React components, each wrapped in a <Router> component. I haven't tested it so I'm not sure if it will work, but try something like the below:
const carNode = cars.map((car, i) => {
return (
<div key={i}>
<Link
to={{ pathname: '/Carnama/'+car.id}}
className="list-group-item"
key={car.id}>
{car.name}
</Link>
</div>
)
});
return (
<div>
<h1>Cars page</h1>
<div className="list-group">
<Router>
{carNode}
<Route path="/Carnama:id" component={Carnama}/>
</Router>
</div>
</div>
);
这篇关于反应路由器如何单击以详细了解组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
