Question

我创建了一个网页来显示个人资料。默认情况下，配置文件页面会加载用户信息，但是如果我使用相关的用户ID调用配置文件页面，我也可以从其他用户加载信息。

URL是/profile或可以是/profile?id=12334

在我的代码中，我只是这样做是为了在单击按钮时在URL中添加ID：

<a href="/profile?id=123123">

我的个人资料页面目前仅呈现虚假数据，但是我不知道如何提取ID并检查id是否存在并且不为空。


import React from 'react';
import './Profile.css';

import UserProfile from '../assets/fake/studentinfo'
import TextContents from '../assets/translations/TextContents';
import Gallery from 'react-grid-gallery';
import DetailReview from '../components/materialdesign/DetailReview';
import {Tabs, Tab}  from 'react-bootstrap';
import EmptyTile from '../components/EmptyTile';


class Profiles extends React.Component{

    constructor(props, context) {
        super(props);
        this.state = {isUserAccount: true, userId: '', userInfo: UserProfile.User1.values};
    }

    componentDidMount() {
        let { id } = useParams();
        if((id!==null) && (id !== '')) {
            this.setState({userId: id})
            this.setState({isUserAccount: false})
            this.fetchData(id);
        }
    }

    fetchData = id => {
        this.setState({userInfo: UserProfile.User2.values})
    };


    render(){
        

        const IMAGES =
        [{
                src: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg",
                thumbnail: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_n.jpg",
                thumbnailWidth: 156,
                thumbnailHeight: 156
        },
        {
                src: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_b.jpg",
                thumbnail: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_n.jpg",
                thumbnailWidth: 156,
                thumbnailHeight: 156
        },
        
        {
                src: "https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_b.jpg",
                thumbnail: "https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_n.jpg",
                thumbnailWidth: 156,
                thumbnailHeight: 156
        },
        {
            src: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_b.jpg",
            thumbnail: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_n.jpg",
            thumbnailWidth: 156,
            thumbnailHeight: 156
        }]

        return(
            <div className="profile-container">
                <div className="profile-header" 
                    style={{ backgroundImage: `url(${UserProfile.User1.values.profileHeaderImag})`}}>
                        <img 
                        src={UserProfile.User1.values.profileImg} 
                        alt="profileImg"
                        className="profile-header-image-user"/>                    
                </div>
                <div className="profile-content">
                    <h1> {UserProfile.User1.values.name} </h1>
                    <h3> {UserProfile.User1.values.city}  </h3>
                    <h2> {TextContents.Biography} </h2>
                    <p> {UserProfile.User1.values.bio}  </p>
                    <h2> {TextContents.PhotosVideos} </h2>
                    <div className="profile-gallery">
                        <Gallery id="ReactGridGallery" images={IMAGES}/>
                    </div>
                </div>
                <div className="profile-tabs">
                    <Tabs defaultActiveKey="profile" id="uncontrolled-tab-example">
                        <Tab eventKey="yourclasses" title="Your Classes">
                            <div>
                            <EmptyTile text={TextContents.CreateYourOwnClass} url="/createaclass"/>
                            </div>
                        </Tab>
                        <Tab eventKey="joinedclasses" title="Joined Classes">
                        <div>
                            <EmptyTile text={TextContents.DiscoverANewExp} url="/createaclass"/>
                        </div>
                        </Tab>
                        <Tab eventKey="bookmarks" title="Bookmarks">
                        <p> {TextContents.NoBookMarkYet} </p>
                        </Tab>
                        <Tab eventKey="yourhosting" title="Your Hosting">
                        <div>
                            <EmptyTile text={TextContents.HaveBusinessOrHome} url="/createahost"/>
                        </div>
                        </Tab>
                    </Tabs>
                </div>
                <div className="profile-content">
                    <h2>{TextContents.Reviews}</h2>
                        {
                            UserProfile.User1.values.reviews.map((review_item, i) => {
                                return (<DetailReview data={review_item} />);
                            })
                        }
                </div>
            </div>
        )
    }   
}

export default Profiles;

稍后将用适当的数据替换数据，但现在，我只想确保如果可以从URL中提取ID，就可以轻松提取

谢谢

Answer 1

URL和URLSearchParams是您所追求的，它不需要React，它是本机JS。 link.searchParams.get('id')就足够了，但这取决于您的目标浏览器，因此您可能需要在代码中使用polyfill，否则：

const {searchParams} = new URL(a.href);
if (searchParams.has('id')) {
  // do your thing with ...
  console.log(searchParams.get('id'));
}

Answer 2

如果您使用的是react-router-dom，则可以使用它们的某些钩子从URL中解构掉内容。

在这种情况下，您要寻找的钩子是useParams

const { id } = useParams();

如果您使用的是类组件；您可以使用higher order component withRouter，也可以使用matchPath，如果您有预先匹配的路径。

如何从react中的URL正确提取参数

2 个答案: