reactjs - 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;

动态路线按预期工作，但一旦我尝试进入设置页面，我就会看到我不想要的详细信息页面的内容。

标签： reactjsreact-router

Answer 1

使用精确的道具

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