CODEWITHSUNDEEP
reactjslaravel
Osama Mohammed
Osama Mohammed

Reputation: 2861

Get id from url in react.js

I just want to make Ajax request to fetch data from API in REACT.JS, but every API need (id), I want to get that id from URL in browser, how can I do that?

This is my code:

componentDidMount(){
  fetch("http://localhost:8000/personal/1")
  .then(res => res.json())
  .then(json => {
    this.setState({
        isLoaded: true,
        information: json,
    })
})

I make the API by Laravel, and every thing work good with this code above, but as I said, I want to get the id from url in browser not just write it as now, thank you :)

Upvotes: 22

Views: 123741

Answers (9)

SamuoCodes
SamuoCodes

Reputation: 1

If you are using class components in React, you can use:

this.props.match.params.id

this will get the id from the url.

Upvotes: 0

Joseph Owigo
Joseph Owigo

Reputation: 574

First of all in your navigation file like app.js or navigation.js add this route

<Route path="/home/:id"  element={<Landing />} />

than on the Landing screen or page use this code to obtain that value

  const params = useParams()
  console.log(params)

Upvotes: 6

Ankit Tiwari
Ankit Tiwari

Reputation: 4690

In Class Component you can access ID by adding constructor and then access ID from props for example

export class PostDetail extends React.Component {
  
  constructor(props) {
    super(props);
    console.log(this.props.match.params.id)
    this.state = {
      data: [],
      loaded: false,
      placeholder: "Loading"
    };
  }

  render(){
    return(<h1>Post Detail</h1>);
  }
}

Upvotes: 3

Abnish
Abnish

Reputation: 551

In React Hooks, You should use useParams(). ex - This is your url - http://localhost:8000/personal/1.

So in this case, use const { id } = useParams()

now, if you do console.log(id), it will give you the exact id of the url. In this case, it will give you 1.

useParams() extracts the id from the url and lets us use it.

Upvotes: 45

angry kiwi
angry kiwi

Reputation: 11445

remember useParams is from react router dom not from react package

import { useParams } from 'react-router-dom'

Upvotes: 3

imjoymhnt
imjoymhnt

Reputation: 1091

For hooks user

import React from "react";
import {useParams} from 'react-router-dom';

const ProductDetails = () => {
const {id} = useParams();
  return (
    <>
      <h1>Product id: {id}</h1>
    </>
  );
};

export default ProductDetails;

Upvotes: 4

Mathias Oxholm
Mathias Oxholm

Reputation: 101

In your Route you can specify a parameter and then later get that with useParams.

// App.js
<Route path='/post/:id' component={PostDetail} />

// Single post component
import axios from "axios";    
import { useState, useEffect } from "react"
import { useParams } from "react-router-dom";

// Get ID from URL
const params = useParams();
    
    const [posts, setPosts] = useState([])
    
        useEffect(()=> {
            axios.get(`http://localhost:5000/posts/${params.id}`)
            .then(res => {
                console.log(res)
                setPosts(res.data)
            })
            .catch(err =>{
                console.log(err)
            })
        }, [params.id])

From there on out you can use {post.yourdata} in the component.

Upvotes: 10

Ramaraja
Ramaraja

Reputation: 2626

Approach #1

You can make use of the history prop from react-router-dom, here is a link that explains how to do so in detail,

https://tylermcginnis.com/react-router-programmatically-navigate/

Approach #2

If you want to make it super simple, then how about making use of the window.location object?

Suppose you are on a page with the url http://localhost:8000/personal/1

window.location.href would give http://localhost:8000/personal/1

window.location.pathname would give /personal/1

Once you have the pathname or href you can use your regular string functions like split(...) and get the ID.

Upvotes: 11

Anuja
Anuja

Reputation: 1038

Better use rect-router if you are using react for the front end. That way you can easily manipulate path parameters and access them in you components using match.params.[paramName].

By using plain js you could use window.location object.

  • http://localhost:8000/personal/1 => window.location.pathname = personal/1 [path params]
  • http://localhost:8000/personal?id=1 => window.location.search = ?id=1 [search params]

If you are using search params there's a good library called query-string to parse them. And of course if you are using path name you'll need to manually strip out you params.

Upvotes: 2

Related Questions