使用 URL 参数动态渲染 React 页面

Question

我在 <url>/machines 有一个页面，其中列出了网络上一组机器的 IP 地址。我希望能够单击列表中的一个并 link 到页面 <url>/machines/<machineid> 以呈现一个显示有关该特定机器信息的新页面。我希望将 URL 中指定为 <machineid> 的值作为可用值传递到呈现的页面中，例如在 prop/param 等

我在配置 React 路由器以实现此目的时遇到问题，想知道是否有人能看出我做错了什么？我一直在关注 React Router V6 文档，但似乎无法正常工作。当我在 <url>/machines/hello 呈现页面时，我收到一个控制台错误，显示 No routes matched location "/machines/hello"。谁能看出我做错了什么？

我最初以为我只是渲染一个新页面（使用不同的组件）来渲染机器信息页面，但是查看 React Router V6 文档，似乎 <MachineInfo> 组件是现在呈现为 <Machines>?

的子项

我在 <MachineInfo> 组件中有一个 alert()，它似乎根本不是运行。我没有收到警报。

App.js

function App() {
  const value = useContext(Context);
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="machines" element={<Machines />}>
          <Route path="machines/:id" element={<MachineInfo />} />   // I've tried this using just path=":id" as well with no luck
        </Route>
        <Route path="topology" element={<Topology />} />
        <Route path="settings" element={<Settings />} />
      </Routes>
    </div>
  );
}

MachineInfo.js

export default function MachineInfo(props) {

    const [state, dispatch] = useContext(Context);
    let { id } = useParams<"id">([]);
    alert("info: " + id)
    
    return (
        <p>hello</p>
    );
}

Answer 1

首先，您需要一个 Layout 组件，其中包含您的 Outlet

export function Layout() {
  return (
    <>
     <Outlet />       
    </>
  );

现在将您的其他路由包含在这个 Layout 组件中，您会发现您现在可以通过说 /machines/1 来访问您的嵌套路由 Dashboard 组件是索引，因此 / 应该匹配这条路线。

function App() {
  // Not sure why you have value since it doesn't seem to be getting used
  const value = useContext(Context);
  return (
    <div className="App">
      <Routes>
        <Route path="/*" element={<Layout />}>
           <Route index element={<Dashboard />} />
           <Route path="machines" element={<Machines />}>
             <Route path=":id" element={<MachineInfo />} />   
           </Route>
           <Route path="topology" element={<Topology />} />
           <Route path="settings" element={<Settings />} />
         </Route>
      </Routes>
    </div>   
   );
 }

使用 URL 参数动态渲染 React 页面

Render React page dynamically using URL parameter

javascript

url

wildcard

reactjs