所以我映射了一组用户,每个用户都有一个唯一的 ID。我想为链接创建一个路径,其中将包含用户的唯一 ID,具体取决于单击的链接。到目前为止,这是我尝试过的方法(由于某种原因,链接不允许我使用模板文字)
import React, {useEffect, useState} from 'react';
//import {axiosWithAuth} from '../api/axiosWithAuth';
//import axios from 'axios';
import {connect} from 'react-redux';
import {useParams, Link} from 'react-router-dom';
import {fetchUsers} from '../actions/index';
//get request to /api/users -- will return array of users
const ListUsers = props =>{
const [data, setData] = useState([{username:'hello world!'}]);
const params = useParams();
const path = `/Profile/${params.id}`
// function myFunction(id) {
// alert(item.id);
// }
useEffect(() => {
props.fetchUsers();
}, [])
return(
<div>
{props.users.map(item=>{return(
<Link path='/Profile' params={{id: item.id}}>
<div className="UsersCard">Username: {item.username} <br /> Name: {item.firstName} <br /> ID: {item.id} <br /> Email: {item.email} </div>
</Link>
)})}
</div>
)
}
const mapStateToProps = state => {
return {
users: state.users,
user: {},
registerSuccessMessage: '',
user_stories: {},
isLoading: false,
error: null
}
}
export default connect(mapStateToProps, {fetchUsers})(ListUsers);
//get request to /api/users/:id -- will return users specified by ID
这是我的路线
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import PrivateRoute from './api/PrivateRoute';
import SignIn from './Components/SignIn';
import SignUp from "./Components/SignUp";
import Profile from './Components/Profile';
import Stories from './Components/Stories';
import Nav from "./Components/Nav";
import ListUsers from './Components/ListUsers';
import EditUser from './Components/EditUser';
function App() {
return (
<div className="App">
<Router>
<Nav/>
<Switch>
<Route path='/SignIn' component={SignIn} />
<Route path='/SignUp' component={SignUp} />
<Route exact path='/' />
<PrivateRoute path='/UsersList' component={ListUsers} />
<PrivateRoute exact path='/Profile/:id' component={Profile} />
<PrivateRoute path='/Stories' component={Stories} />
<PrivateRoute path='/Profile/:id/editProfile' component={EditUser} />
</Switch>
</Router>
</div>
);
}
export default App;
我希望它根据点击的用户将我带到“/Profile/:id”路径
最佳答案
<Link to={`/Profile/${item.id}`}>
...
</Link>
对于搜索参数,您可以传递一个对象。
<Link to={{
pathname: "/Profile",
search: "?key=value",
}}>
...
</Link>
关于reactjs - react 路由器 dom - 链接。如何将 ID 放入链接的路径中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63614183/