如何使用React路由器更改重新渲染的文档标题名称？

Question

我基本上希望我的文档标题在显示更改的数组的值时进行更新 - 我在屏幕上呈现订单列表，当用户按下按钮时，它将更改，但是在屏幕上显示了许多订单。

我希望在文档标题中反映的产品数量：“/（订购）订单”将是React路由器中路由的名称。订购将在每次重新渲染显示的新订单上更改。

但是，当我收到错误/警告时，它不起作用：（没有路由与位置匹配的位置“/（）订单”）

如何解决这个问题？

下面的代码。

orders.jsx

import { Col, Row } from "antd";
import { useContext, useEffect, useMemo, useState } from "react";
import Order from "../components/Order";
import { AppContext } from "../context/Context";
import AntButton from "../elements/Button";
import ordersToDisplay from "../orders.json";

const OrdersPage = () => {
    const [filteringStatus, setFilteringStatus] = useState("");
    const {orderAmount, setOrderAmount} = useContext(AppContext)
    const [test, setTest] = useState("")

    const setDiplayAcceptedOrders = () => {
        setFilteringStatus("accepted");

    };
    
    const setDiplayCompletedOrders = () => {
        setFilteringStatus("complete");

    };
    
    const setDiplayInProgressOrders = () => {
        setFilteringStatus("inProgress");

    };


    const orders = useMemo(() => {
        if (filteringStatus) {
          return ordersToDisplay.filter((i) => i.orderStatus === filteringStatus);
        }
        return ordersToDisplay;
    }, [filteringStatus]);

    useEffect(() => {
        console.log(orderAmount);
        console.log(orders.length)
        setOrderAmount(orders.length)
    })

    console.log("Orders to display: ", ordersToDisplay);
    console.log("test value: ", test)



    return(
        <div className="container">
            <Row justify="space-between" align="middle">
                <Col span={6}>
                    <h1>Orders</h1>
                </Col>
                <Col span={6}>
                    <AntButton onClick={setDiplayAcceptedOrders} name="Accepted"/>
                </Col>
                <Col span={6}>
                    <AntButton onClick={setDiplayInProgressOrders}  name="In Progress"/>
                </Col>
                <Col span={6}>
                    <AntButton onClick={setDiplayCompletedOrders} name="Complete"/>
                </Col>
            </Row>
            <Row>
                <Col span={12}>
                    <h3>{filteringStatus == "" ? "All Orders" : filteringStatus}</h3>
                    {orders.map((e) => {
                        return(
                            <Order
                            key={e.id}
                            productName={e.productName}
                            dateOrdered={e.dateOrdered}
                            orderStatus={e.orderStatus}
                        />
                        )
                    })}
                </Col>
            </Row>
        </div>
    )
}

export default OrdersPage;

app.jsx

import './styles/styles.scss'
import orders from "./orders.json";
import { BrowserRouter } from 'react-dom';
import HomePage from "./pages/home";
import OrdersPage from "./pages/orders";
import { useRoutes } from 'react-router-dom';
import { useState } from 'react';
import { AppContext } from './context/Context';


const App = () => {
    const [orderAmount, setOrderAmount] = useState("")

    const Routes = useRoutes([
        {path: "/", element: <HomePage/>},
        {path: `/(${orderAmount})orders`, element: <OrdersPage/>}
    ])
    
  return (
        <AppContext.Provider value={{
            orderAmount, setOrderAmount
        }}>
            <div>
                {Routes}
            </div>
        </AppContext.Provider>
  );
};

export default App;

home.jsx（用户最初单击按钮将其带到订单页面

import { Col, Row } from "antd";
import { useContext } from "react";
import { Link } from "react-router-dom";
import { AppContext } from "../context/Context";
import AntButton from '../elements/Button'

const HomePage = () => {
    const {orderAmount} = useContext(AppContext)
    console.log(orderAmount)
    return(
        <div className="container">
            <Row>
                <Col span={24}>
                    <Link to={`/(${orderAmount})orders`}>
                        <AntButton name="Orders" type="primary"/>
                    </Link>
                </Col>
            </Row>
        </div>
    )
}

export default HomePage;

Answer 1

路径中的支架正在引起问题。根据文档，

（） - 包裹一部分URL的可选。你可能逃脱
括号如果要使用Backslash \

在URL中使用它们

如果您坚持使用括号，则可以

{path: `/\(${orderAmount}\)orders`, element: <OrdersPage/>}

或者可以逃脱它，如果您只希望doc标题反映订单的信息，则可以查看 https://github.com/nfl/reaect-helmet ，它允许您从编程中更改DOC标头到任何内容想要不修改路线。