小编Dre*_*ese的帖子

我尝试了几种方法来匹配查询字符串并根据该字符串显示组件，但没有运气，我的代码：

  <Route path="/wp-admin/admin.php" element={<PageOne />} >
        <Route path="/wp-admin/admin.php/?id=two" element={<PageTwo />} />
        <Route path="/wp-admin/admin.php/?id=three" element={<PageThree />} />
  </Route>

我想根据查询字符串显示组件 PageTwo 和 PageThree 但它不起作用，我尝试在父路由中使用 :id 但它不起作用，我想我在这里缺少一些基本的东西。

我正在id从ProductListing组件发送一个，并且我正在组件中id使用它来接收它。在组件中，我使用 find 方法查找一个对象，然后将其设置为状态。刷新时我得到的是未定义的。useParamsProductDetailProductDetailsingleProductsingleProduct

进口

import React, { useState, useEffect } from "react";
import { NavLink, useParams } from "react-router-dom";
import Loading from "../other/Loading";

状态

const ProductDetail = () => {
  const [loading, setLoading] = useState(false);
  const [products, setProducts] = useState([]);
  const [singleProduct, setSingleProduct] = useState({});

使用 useParams 接收 id

  const { id } = useParams();

使用效果

  useEffect(() => {
   //GETTING PRODUCTS ARRAY
    getProductListingData();
   //FINDING A SINGLE OBJECT
    getProductID();
  }, …

我尝试使用具有动态值的嵌套路由。App.js 中的正常路由正在工作，但 QouteDetail 中的嵌套路由没有显示任何内容。控制台显示“没有路线匹配位置”。有人可以告诉我出了什么问题吗？

代码 ：

import React from 'react';
import {Route , Routes } from "react-router-dom";
import AllQuotes from './components/AllQuotes';
import NewQuote from './components/NewQuote';
import QuoteDetail from './components/QuoteDetail';

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<AllQuotes/>} />
        <Route path="/quotes" element={<AllQuotes/>} />
        <Route path="/new-quotes" element={<NewQuote/>} />
        <Route exact path="/quotes/:quoteID" element={<QuoteDetail/> } /> 
      </Routes>

    </div>
  );
}

export default App;

import React from 'react';
import { Route, Routes , useParams } from 'react-router-dom';
import Comments from './comments/Comments';

function QuoteDetail(props) …

我目前正在学习 Next.js 13，并尝试从 PocketBase 数据库中获取数据以显示在表格中。我创建了一个连接到数据库并检索数据的 API 路由。但是，我在服务器组件中获取此数据时遇到问题。

这是我的项目的结构：

app/
  api/
    ingresos/
      route.ts
  components/
    tablaIngresosCliente.tsx
  ingresos/
    page.tsx
  ...

在 中route.ts，我连接到 PocketBase 数据库并获取数据：

app/
  api/
    ingresos/
      route.ts
  components/
    tablaIngresosCliente.tsx
  ingresos/
    page.tsx
  ...

在 中tablaIngresosCliente.tsx，我尝试从 API 路径获取数据：

// app/api/ingresos/route.ts
import { NextResponse } from 'next/server';
import PocketBase from 'pocketbase';

export async function GET(request: Request) {
  const pb = new PocketBase('http://127.0.0.1:8090');
  try {
    const records = await pb.collection('ingresos').getFullList({
      sort: '-created',
    });
    return NextResponse.json(records);
    
  } catch (error) {
    console.error(error)
    return new …

我正在尝试加载演示故事书故事。我使用create-react-app并运行创建了一个反应应用程序npm start。它从端口：3000 开始。然后当我运行时npm run storybook，它会在端口：6006 上打开浏览器。但仅显示空白页。

我的问题可能不清楚，但这是我的问题。这是我使用 map 方法从数组中获取的卡片，并在每张卡片上显示每个项目。我已经触发了“编辑”按钮，以便它显示隐藏的文本（只想在一张卡片中看到它）。但是，当我仅单击一张卡片时，所有卡片都会显示该隐藏消息。你能帮我么？

我想在单击编辑按钮的卡片中看到“只想在一张卡片中看到此内容”文本

这是我的代码：

const [edit, setedit]= useState(false)  

<Grid container spacing={5} className="main-grid" >
{allitems.map((oneitem, index) => {
return (
<Grid item key={index} md={3} className="itemGrid" >
<Card className="card">
<CardContent>
<Typography className="" color="textSecondary" gutterBottom>
{oneitem.title}
</Typography>/
<p variant="h5" component="h2" className="description">
{oneitem.description}
</p>
<p className="" color="textSecondary">
Created At: {oneitem.createdAt}
</p>
<Button size="small" onClick={()=> deleted(oneitem._id)} >Delete</Button>
<Button size="small" onClick={()=>setedit(!edit)} >Edit</Button>  <-here is the problem
{edit && <h1>Want to see this in only one card</h1>}   
</CardContent>

这是图像

为了检索当前的查询参数，我使用这个：

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

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

然后在功能组件中：

const query = useQuery();

Link但是，除了具有新值的查询参数之外，我没有找到任何集成的解决方案可以轻松设置为相同的查询参数。

到目前为止，这是我的解决方案：

const filterLink = query => param => value => {
  const clone = new URLSearchParams(query.toString());
  clone.set(param, value);
  return `?${clone.toString()}`;
}

return (
  <>
    <Link to={filterLink(query)('some-filter')('false')}>False</Link>
    <Link to={filterLink(query)('some-filter')('true')}>True</Link>
  </>
)

我必须克隆该query对象，以免改变原始对象，并且filterLink在 JSX 中多次调用时不会产生不需要的副作用。我还必须自己添加问号，因为URLSearchParams.prototype.toString()不添加它。

我想知道为什么我必须自己这样做？我真的不喜欢在使用框架时做如此低级的事情。我错过了反应路由器中的某些东西吗？是否有更常见的做法可以满足我的需要？

在我的 React 应用程序中，我有一个 .env 文件，每次更改它们时，我都看不到更改，直到我停止并再次 npm start 是否有更快的方法？

你好，我正在寻找答案 uselocation 挂钩的意义是什么。我正在构建我的第一个 React 项目。我可以轻松到达全球位置对象并且工作正常。如果我使用这个钩子我能得到什么样的好处？

谢谢。

我正在尝试将 url 中的参数渲染为网站中的 h2 。但即使当我尝试 console.log useParams 也是空的。

这是我的 Router.js 文件

const Webpages = () => {
    return (
        <Router>
            <Routes>
                <Route exact path="/" element={Home()} />
                <Route exact path="/comics" element={Comics()} />
                <Route path='/comics/:comicId' element={Comic()} />  <--------------
                <Route exact path="/portfolio" element={Portfolio()} />
                <Route exact path="/blog" element={Blog()} />
                <Route exact path="/contact" element={Contact()} />
                <Route exact path="/store" element={Store()} />
                <Route path="*" element={NotFound()} />
            </Routes>
        </Router>
    );
};

export default Webpages;

这是我的漫画组件

import React from 'react';
import NavBar from '../../components/NavBar';
import { useParams } …