React router dom - 链接。如何将 ID 放入 Link 的路径中

Question

因此，我映射了一组用户，每个用户都有一个唯一的 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”路线

Answer 1

<Link to={`/Profile/${item.id}`}>
  ... 
</Link>

对于搜索参数，您可以传递一个对象。

<Link to={{
    pathname: "/Profile",
    search: "?key=value",
  }}>
   ...
</Link>

版本 5 文档 版本 6 文档