反应路由器DOM-Link。如何将ID放入链接的路径中 [英] React router dom - Link. How can I put an ID into the path of Link

问题描述

因此，我在一个用户数组上进行映射，每个用户都有一个唯一的ID。我想为该链接创建一个路径，该路径将包括用户的唯一ID，具体取决于所单击的链接。以下是我到目前为止所尝试的方法(由于某些原因，链接不允许我使用模板文字)

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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

这是我的路线

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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>

https://reactrouter.com/native/api/Link

这篇关于反应路由器DOM-Link。如何将ID放入链接的路径中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！