reactjs - react-router-dom - 如何使用查询参数作为路径？

Question

我目前遇到 URL 问题，包括查询参数命中 404 错误页面。我需要查询参数，因为此 URL 是来自第 3 方应用程序的重定向。

我的路由器交换机：

export default function App() {
    return (
        <React.Suspense fallback={<span>Loading...</span>}>
            <Router>
                <ReactNotification />

                <React.StrictMode>
                    <Switch>
                        <Route exact path="/" component={Home} />

                        {singleRouting.map((route, i) => (
                            <RouteWithSubRoutes key={i} {...route} />
                        ))}
    
                        <Route path="*">
                            <Error />
                        </Route>
                    </Switch>
                </React.StrictMode>
            </Router>
        </React.Suspense>
    );
}

const RouteWithSubRoutes = (route) => {
    return (
        <Route
            exact={route.exact || undefined}
            path={route.path}
            render={(props) => (
                // pass the sub-routes down to keep nesting
                <route.component {...props} />
            )}
        />
    );
}

我的路线：

import FinanceBody from '../main/finance/FinanceBody';

const singleRouting = [{
    path: "/finance?:applicationId&:status&:supplierOrderReference",
    exact: true,
    component: FinanceBody 
}];

export { singleRouting };

标签： reactjsreact-routerreact-router-dom

Answer 1

经过不断的跟踪和错误，我发现答案非常基础。

上一条路径：

path: "/finance?:applicationId&:status&:supplierOrderReference"

更新路径：

path: "/finance"

您可以正常访问查询参数location.search