React router dom - Link. Как я могу ввести идентификатор в путь к ссылке

#reactjs #react-router-dom

Вопрос:

Итак, я сопоставляю массив пользователей, и у каждого пользователя есть уникальный идентификатор. Я хочу создать путь для ссылки, который будет включать уникальный идентификатор пользователя, в зависимости от того, какая ссылка нажата. Вот что я пробовал до сих пор (ссылка по какой-то причине не позволяет мне использовать литералы шаблонов)

 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’ в зависимости от того, какой пользователь щелкнул

Ответ №1:

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

Для параметров поиска вы можете передать объект.

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

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

Ответ №2:

Вам просто нужно заключить путь в фигурные скобки, а затем использовать любой javascript, который вы хотите, а также литералы шаблонов

 <div>
            {props.users.map(item=>{return(
            <Link path={`/Profile/${item.id}`}>
                <div className="UsersCard">Username: {item.username} <br /> Name: {item.firstName} <br /> ID: {item.id} <br /> Email: {item.email} </div>
            </Link>
                )})}
        </div>

Ответ №3:

значение идентификатора лучше включать в путь ссылки.

 <Link path={`/Profile/${item.id}`} params={{id: item.id}}>

Это позволяет работать везде, откуда пользователь получает ссылку.