Reactjs 静态和动态路由

Question

我正在尝试在我的 React 应用程序中同时使用静态路由和动态路由。我有一个 JSON 文件，其中包含应用程序具有的所有动态路由，如下所示：

[
  {
    "Text": "Home",
    "Link": "/"
  },
  {
    "Text": "Users",
    "Link": "/Users"
  },
  {
    "Text": "Posts",
    "Link": "/Posts"
  }
]

这是我的应用程序（我删除了一些不需要的代码）

import React from 'react';

function App() {

    return (
        <div className="Grid-Container">
           <Router>
            <Switch>
                <div>
                    <!-- Static Route to the Settings section -->
                    <Route
                        path='/settings/home'
                        component={Settings}
                        key={'Settings'}/>
                    <!-- Dynamic Route which displays all Entries for the chosen Page -->
                    <Route
                        path={`/${page.Text}`}
                        component={objectPage}
                        key={`${page.Text}-List`}
                        exact/>
                    <!-- Dynamic Route which displays one Entry for the chosen Page --> 
                    <Route
                        path={`/:object/:id`}
                        component={DetailPage}
                        key={`Detail-Route`}
                        exact/>
                </div>
            </Switch>
          </Router>
        </div>
    );
}

export default App;

动态路线按预期工作，但是当我尝试转到设置页面时，我看到了我不想要的详细信息页面的内容。

Answer 1

尝试将静态 Route 作为 Switch 的第一个子级。

正在发生的事情是Switch 正在按时间顺序将您的 URL 与您的路由进行比较。它将您的settings 解释为url 参数:object。因为它现在找到了一个它认为与您的 URL 匹配的 Route，所以它会呈现您的详细信息页面，并且不会检查您的任何其他 Routes 是否也匹配甚至更好。

import React from 'react';

function App() {

    return (
        <div className="Grid-Container">
            <Router>
                <Switch>
                    <!-- Static Route to the Settings section -->
                    <Route
                        path='/settings'
                        component={Settings}
                        key={'Settings'}/>

                    <!-- Dynamic Route which displays all Entries for the chosen Page -->
                    <Route
                        path={`/${page.Text}`}
                        component={<ObjectPage />}
                        key={`${page.Text}-List`}
                        exact/>
                    <!-- Dynamic Route which displays one Entry for the chosen Page -->
                    <Route
                        path={`/:object/:id`}
                        component={DetailPage}
                        key={`Detail-Route`}
                        exact/>
                </Switch>
            </Router>
        </div>
    );
}

export default App;

Answer 2

使用精确的道具

<Route
       path='/settings'
       component={Settings}
       key={'Settings'}
       exact
/>