Reactjs 在 React 中将路径与查询变量匹配

假设我的网站上有以下页面

• 第1页:example.com/somepage.php?action=a页
• 第2页:example.com/somepage.php?action=b页
• 第3页:example.com/somepage.php?action=b&other=c页

重要提示:我无法控制URL路径，这就是它们是如何设置的，这就是它们远不理想的原因.

我正在创建一个Reaction应用程序，并试图设置路由，所以我是从以下几个方面开始的:

function MyNav () {
    return (
        <Routes>
            <Route path='/somepage.php?action=a' element={<Page1 />} />
            <Route path='/somepage.php?action=b' element={<Page2 />} />
            <Route path='/somepage.php?action=b&other=c' element={<Page3 />} />
            <Route path='*' element={<Page1 />} />
        </Routes>
    )
}

但这并没有奏效.经过调查，在看了window.location个物体后，原来<Route/>中的path将与location.pathname相提并论.因此，对于上面的所有页面，window.location个对象将如下所示:

window.location
    ...
    pathname: "/somepage.php"
    search: "?action=a" // <-------- this is for Page 1, and will be different for Page 2 and Page 3
    ...

因此，第1页的路由应设置如下

<Routes>
    <Route path='/somepage.php' element={<Page1 />} />
    ...
</Routes>

但这会产生问题，因为所有页面的路径都是相同的，如下所示:

<Routes>
    <Route path='/somepage.php' element={<Page1 />} />
    <Route path='/somepage.php' element={<Page2 />} />
    <Route path='/somepage.php' element={<Page3 />} />
    <Route path='*' element={<Page1 />} />
</Routes>

现在，为了解决上面的问题，我找到了this solution个，所以我稍微修改了一下代码，如下所示

function MyNav () {
    
    const getPage = (location) => {
        
        const params = new URL(location.href).searchParams;
        const action = params.get('action');
        const other = params.get('other');
        
        if (action == 'a') {
            return <Page1 />
        }

        if (action == 'b') {
            if (other == 'c') {
                return <Page3 />
            }

            else {
                return <Page2 />
            }
        }
    }
    
    
    return (
        <Routes>
            <Route path='/somepage.php' element={ getPage (location) } />
            <Route path='*' element={<Page1 />} />
        </Routes>
    )
}

现在这招起作用了(耶！)，然而它违背了<Route/>中pathprops 的目的.那么，有没有办法从<Route/>内搜索directly个搜索参数呢？也许是这样的？(IMPORTANT: THE FOLLOWING IS PSEUDO CODE)

<Routes>
    <Route path='/somepage.php' params='action=a' element={<Page1 />} />
    <Route path='/somepage.php' params='action=b' element={<Page2 />} />
    <Route path='/somepage.php' params='action=b&other=c' element={<Page3 />} />
    <Route path='*' element={<Page1 />} />
</Routes>