頁面加載后反應添加路由

Question

我有一個帶有名稱列表（可能會更改）的 API 然后我想從該列表中創建路由，但我不斷收到找不到路由的錯誤。 但是，當手動添加名稱的路由時，它可以工作。 如何在頁面加載后添加路由以使其工作這是我的代碼

function App() {
    let json =[]
    fetch(`${baseURL}/applications/`).then(response =>{return response.json();}).then(data =>{json=data})
    console.log("json =", json)
    return (
      <Router>
        <div className="App">
          <header className="App-header">
              <Routes>
                  <Route path="/" exact element={<ApplicationsList/>}/>
                  <Route path={"/1080p-Lock"} exact element={<ApplicationPage name={"1080p-Lock"}/>}/>
                  {json.map(item => {ReactDOM.render(<Route path={"/" + item} exact element={<ApplicationPage name={item}/>}/>)})}
              </Routes>
          </header>
        </div>
      </Router>
    );
}

Answer 1

問題

React 渲染 function 是同步的，純 function，它不能等待異步邏輯完成。 json值在每個渲染周期重置為空數組。

路由映射只需要返回需要渲染的Route組件，這里使用ReactDOM不是很有效。

解決方案

使用組件 state 來存儲獲取的數據並使用掛載useEffect掛鈎來發出獲取請求。

function App() {
  const [routes, setRoutes] = useState([]);

  useEffect(() => {
    fetch(`${baseURL}/applications/`)
      .then(response => {
        return response.json();
      })
      .then(data => {
        setRoutes(data);
      })
      .catch(error => {
        // handle any rejected Promises, etc...
      });
  }, []);

  return (
    <Router>
      <div className="App">
        <header className="App-header">
          <Routes>
            <Route path="/" element={<ApplicationsList/>}/>
            <Route path={"/1080p-Lock"} element={<ApplicationPage name={"1080p-Lock"}/>}/>
            {routes.map(item => (
              <Route path={"/" + item} element={<ApplicationPage name={item}/>}/>
            ))}
          </Routes>
        </header>
      </div>
    </Router>
  );
}