Extract values from url using React

Question

I'm using React and I need to navigate the user to a profile page, i.e. mydomain.com/profile/myusername but I'm not sure how to extract the 'myusername' from the url? Snippet of my code are below, please help!

Many thanks

Routing

class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <div>
                    <Route path="/" component={Main} exact />
                    <Route path="/profile" component={Profile} exact />
                </div>
            </BrowserRouter>
        );
    }
}

export default App;

My hyperlink

<Link to={`profile/${obj.username}`}>{obj.username}</Link>

My profile page

import React, { Component } from 'react';

class Profile extends Component {

  componentDidMount() {
  }

  render() {

    return (
      <div>
        <h1>myusername</h1>
      </div>
    );
  }
}

export default Profile;

0xc14m1z · Accepted Answer · 2019-02-25 11:01:07Z

4

You have to declare your route like:

<Route path="/profile/:username" component={Profile} exact />

And then in your component you can access the username with:

this.props.match.params.username

Like this:

render() {
  return (
    <div>
      <h1>{ this.props.match.params.username }</h1>
    </div>
  );
}

answered Feb 25, 2019 at 11:01

0xc14m1z

3,7252 gold badges16 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kazi · Accepted Answer · 2023-02-06 10:11:01Z

1

For the recent Typescript versions, we have to specify the name and type of the param we want to use.

URL:

    http://localhost:3004/user-detail/:username

The following way can be used:

    const {username} = useParams<{ username: string }>();

Alternative option 1:

    const { username } = useParams() as { 
        username: string;
    }

Alternative option 2:

Declaring an interface:

    interface ParamInterface {
        username: string;
    }

Then using that interface inside the component:

    const { username } = useParams<ParamInterface>();

Alternative option 3:

    const { username } : any = useParams();

answered Feb 6, 2023 at 10:11

Kazi

3912 silver badges14 bronze badges

Comments

Umair Farooq · Accepted Answer · 2019-02-25 11:02:38Z

0

You can define route as follows:

<Route path="/profile/:id" component={Profile} exact />

In component :

const id = this.props.match.params.idj

answered Feb 25, 2019 at 11:02

Umair Farooq

1,8331 gold badge14 silver badges17 bronze badges

Comments

shradha · Accepted Answer · 2019-02-25 11:05:32Z

0

You may define your route as follows,

<Route path="/profile/:username" component={Profile} exact />

Then access username in your component,

this.props.match.params.username

answered Feb 25, 2019 at 11:05

shradha

4813 silver badges6 bronze badges

Comments

Jamviet.com · Accepted Answer · 2021-08-29 14:27:32Z

0

There are two ways to do: first via useParams() in react-router-dom or via props:

<Route path="/profile/:username" component={Profile} exact />

And get it via:

const username = props.match.params.username || null

But i prefer using default useParams() in react-router-dom:

let useParam =  {} as any;
    useParam = useParams();
    let Param = useParam.any || false;

Good day!

answered Aug 29, 2021 at 14:27

Jamviet.com

3164 silver badges11 bronze badges

Collectives™ on Stack Overflow

Extract values from url using React

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related