526互联

用户输入url，前端如何接收数据

发布时间 2023-12-24 21:53:48作者: 罗论明

获得用户输入的 URL： 你可以使用一个表单，然后通过一个 state hook (例如：useState）来获取和存储用户输入的 URL。
const [url, setUrl] = useState('');

const handleChange = (event) => {
    setUrl(event.target.value);
};

return <input type="text" onChange={handleChange} />;

以用户输入的 URL 获取内容：你可以使用 Fetch API 或者 axios 库等 HTTP 工具向后端发送请求。举例来说，使用 Fetch API 的代码可能如下：
fetch(url)
.then(response => response.json())
.then(data => { /* 处理获取的数据 / })
.catch(error => { / 错误处理 */ });

渲染获取的数据：获取并处理了数据后，你可以将其存入一个 state 中然后在你的组件里使用这个 state 进行渲染。

const [data, setData] = useState(null);

useEffect(() => {
    // 获取数据
    fetch(url)
    .then(response => response.json())
    .then(data => setData(data))
    .catch(error => { /* 错误处理 */ });
}, [url]); // 当 url 更新时重新发出请求

return data ? <div>{/* 渲染数据 */}</div> : 'Loading...';

注意，在实际应用中通过用户输入的 URL 获取并展示内容需要谨慎处理，避免出现跨站脚本攻击（XSS）等安全问题。在处理用户输入及服务器返回的数据时应当进行必要的检查与过滤。

背景：用户从别的网站通过url跳转到我的网址，我如何获取网址中的参数，我的网站是由react开发的

在React中获取URL参数可以通过使用React Router库来实现。你可以在组件中使用这个库的 useParams 或 useLocation hook 来获取URL参数。
首先，你需要通过npm或yarn将React Router库添加到你的项目中。
如果URL参数是路径参数的形式，比方说url是 '/user/:id'，你可以使用 useParams 来获取：
import { useParams } from 'react-router-dom';

function YourComponent() {
let { id } = useParams();

return (

用户id: {id}

);
}

如果URL参数是查询参数的形式，比方说url是 '/user?id=123'，你就需要使用 useLocation 了：

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

function useQuery() {
return new URLSearchParams(useLocation().search);
}

function YourComponent() {
let query = useQuery();
let id = query.get("id");

return (

用户id: {id}

);
}
在React中获取URL参数可以通过使用React Router库来实现。你可以在组件中使用这个库的 useParams 或 useLocation hook 来获取URL参数。

首先，你需要通过npm或yarn将React Router库添加到你的项目中。

如果URL参数是路径参数的形式，比方说url是 '/user/:id'，你可以使用 useParams 来获取：

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

function YourComponent() {
  let { id } = useParams();
  
  return (
    <div>用户id: {id}</div>
  );
}

如果URL参数是查询参数的形式，比方说url是 '/user?id=123'，你就需要使用 useLocation 了：

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

function useQuery() {
  return new URLSearchParams(useLocation().search);
}

function YourComponent() {
  let query = useQuery();
  let id = query.get("id");

  return (
    <div>用户id: {id}</div>
  );
}

强调一点，别忘了把建立路由的地方的URL也适时地更改为你需要的形式，如果是路径参数：<Route path="/user/:id" />，如果是查询参数：<Route path="/user" />。

希望这个答案对你有所帮助！