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

【问题标题】：react-router-dom - how to use query params as path?react-router-dom - 如何使用查询参数作为路径？
【发布时间】：2021-08-05 11:00:02
【问题描述】：

我目前遇到了 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 };

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

经过不断的摸索，我发现答案很基础。

上一条路径：

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

更新路径：

path: "/finance"

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

【讨论】：