React-router-dom TypeError：n不是路由上的函数，重新加载页面有效

Question

当我单击任何路线时，页面不会呈现并引发错误 - TypeError: n is not a function located in the react-dom.Production.min.js 文件。我正在使用 React-Router V6。

应用程序.js

function App() {
return (
    <BrowserRouter>
        <div className="Orchard Inbound Orders">
            <Navbar />
            <div className="container">
                <Routes>
                    <Route exact path="/" element={<UploadOrdersPageHome />} />
                    <Route exact path="/admin-users" element={<AdminPageUsersTab />} />
                    <Route exact path="/admin-clients" element={<AdminPageClientsTab />} />
                    <Route exact path="/create-client" element={<CreateClientPage />} />
                    <Route exact path="/edit-client/:rowkey" element={<EditClientPage />} />
                </Routes>
            </div>
        </div>
    </BrowserRouter>
);

导航栏.js

const Navbar = () => {
return (
    <div>
        <nav className="navbar mx-auto text-center border-bottom border-secondary rounded border-solid bg-light">
            <div className="col-2 col-xl-1">
                <Link to="/">
                    <img className="fit-image" alt="CaptureDx" src={require('../images/capturedxlogo1@3x.png')} />
                </Link>
            </div>
            <h3 className="col-2 my-auto nav-text-header">
                <Link to="/">Upload Orders</Link>
            </h3>
            <h3 className="col-2 my-auto">
                <Link to="/admin-clients">Admin</Link>
            </h3>
            <h3 className="col-2 my-auto">
                <a className="cursor-pointer" href="/">
                    username
                </a>
            </h3>
            <div className="col-2 my-auto text-right">
                <button className="btn btn-lg btn-outline-primary">
                    <a href="/">Log Out</a>
                </button>
            </div>
        </nav>
    </div>
);

错误

Href="/" 对于页面链接来说效果很好，但路由器却不行。我想在路由时使用它来将 props 传递给组件。

Answer 1

解决了

我使用 UseEffect 挂钩作为异步，而没有声明函数然后调用它。

原来的：

    useEffect(async () => {
    const response = await fetch(`http://localhost:3000/orders`);
    const data = await response.json();
    const sortedData = data.sort((a, b) => (a.properties.createdOn < b.properties.createdOn ? 1 : -1));
    setFiles(sortedData);
}, []);

更新：

    useEffect(() => {
    const loadOrders = async () => {
        const response = await fetch(`http://localhost:3000/orders`);
        const data = await response.json();
        const sortedData = data.sort((a, b) => (a.properties.createdOn < b.properties.createdOn ? 1 : -1));
        setFiles(sortedData);
    };
    loadOrders();
}, []);

页面现在可以正确呈现，并且所有页面都可以路由到