Scribd
Upload
2 views3 pages

JSON-SERVER (1)

The document outlines the setup and usage of a JSON server with a sample database (db.json) containing user data. It includes React components that utilize Axios to fetch user data from the server based on different parameters. Additionally, it demonstrates how to extract query parameters in a React component using the useLocation hook from React Router.

Uploaded by

realchandanbn
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views3 pages

JSON-SERVER (1)

The document outlines the setup and usage of a JSON server with a sample database (db.json) containing user data. It includes React components that utilize Axios to fetch user data from the server based on different parameters. Additionally, it demonstrates how to extract query parameters in a React component using the useLocation hook from React Router.

Uploaded by

realchandanbn
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

npm i json-server

==> file => db.json


npx json-server db.json

db.json

{
"user": [
{
"name": "manoj",
"city": "dng"
},
{
"id": "d096",
"name": "bob",
"city": "delhi"
}
]
}

// import axios from 'axios'


// import React, { useEffect } from 'react'

// function App() {

// useEffect(()=>{
// axios.get("http://localhost:3000/user")
// .then((res)=>{
// console.log(res.data)
// })
// },[])

// return (
// <div>

// </div>
// )
// }

// export default App

// import axios from 'axios'


// import React, { useEffect } from 'react'

// function App() {

// useEffect(()=>{
// axios.get("http://localhost:3000/user/id")
// .then((res)=>{
// console.log(res.data)
// })
// },[])
// return (
// <div>

// </div>
// )
// }

// export default App

// import axios from 'axios'


// import React, { useEffect } from 'react'

// function App() {

// useEffect(() => {
// axios.get("http://localhost:3000/user", { params: { name: "manoj" } })
// .then((res) => {
// console.log(res.data)
// })
// .catch((err) => {
// console.error(err)
// })
// }, [])

// return (
// <div>
// {/* You can render response data here */}
// </div>
// )
// }

// export default App

import axios from 'axios'


import React, { useEffect } from 'react'

function App() {

useEffect(() => {
axios.get("http://localhost:3000/user", { params: { name:
"manoj" ,city:"dng"} })
.then((res) => {
console.log(res.data)
})
.catch((err) => {
console.error(err)
})
}, [])

return (
<div>
{/* You can render response data here */}
</div>
)
}

export default App

// http://localhost:3000/user?name=manoj&city=dng or
"http://localhost:3000/user", { params: { name: "manoj" ,city:"dng"} }

===================================================================================
================================

http://localhost:3000/user?name=manoj&city=dng

import { useLocation } from "react-router-dom";

function UserComponent() {
const location = useLocation();

const queryParams = new URLSearchParams(location.search);


const name = queryParams.get("name");
const city = queryParams.get("city");

return (
<div>
<h2>User Details</h2>
<p>Name: {name}</p>
<p>City: {city}</p>
</div>
);
}

You might also like