如何在Router.js中获取App.js内的roomID？

为什么你用props获取失败 #

你直接给Router组件传props是没用的——React Router提供的Router（比如BrowserRouter）根本不接收自定义的roomID这类props。要传递这个值，得遵循React Router的参数传递逻辑，或者用上下文共享状态。

两种可行的解决方法 #

方法一：直接给路由页面组件传props #

如果你的App组件包裹着Router，并且Router是你自己写的路由页面组件，直接在Route的element里把roomID传进去：

// App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import MyRouter from './Router';

function App() {
  const roomID = "your-room-id-here";

  return (
    <Router>
      <Routes>
        {/* 把roomID作为props传给Router组件 */}
        <Route path="/" element={<MyRouter roomID={roomID} />} />
      </Routes>
    </Router>
  );
}

然后在Router.js里就能直接拿到：

// Router.js
export default function MyRouter(props) {
  // 这里就能拿到roomID
  console.log(props.roomID);
  return <div>你的路由内容</div>;
}

方法二：用React Context全局共享roomID #

如果你的Router是React Router的原生组件（比如BrowserRouter），或者需要在多个路由组件里共享roomID，用Context更合适：

1. 先创建一个Context文件：

// RoomContext.js
import { createContext, useContext } from 'react';

const RoomContext = createContext();

// 定义Provider组件，用来传递roomID
export function RoomProvider({ children, roomID }) {
  return (
    <RoomContext.Provider value={roomID}>
      {children}
    </RoomContext.Provider>
  );
}

// 定义自定义Hook，方便获取roomID
export function useRoomID() {
  return useContext(RoomContext);
}

2. 在根组件（比如index.js）里用Provider包裹Router：

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from 'react-router-dom';
import { RoomProvider } from './RoomContext';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
// 假设roomID是在App里生成的，也可以在这里传入
root.render(
  <RoomProvider roomID={App.roomID}>
    <Router>
      <App />
    </Router>
  </RoomProvider>
);

3. 在Router.js里用Hook获取roomID：

// Router.js
import { useRoomID } from './RoomContext';

export default function MyRouter() {
  const roomID = useRoomID();
  console.log(roomID);
  return <div>你的路由内容</div>;
}

内容的提问来源于stack exchange，提问作者Sarvesh Savaliya