React中如何写动态路由？

Question

我在 React 中构建了一个应用程序并尝试进行动态路由，但我的应用程序没有等待 useEffect 结束。

我想在这里做的是从 localStorage 向我的后端发送一个对象，检查它并将它发送回前端。如果结果为真，当我输入“/form”时，我想转到“/form”路由，但如果为假，我想把他送回“/login”。

我尝试在 useState 工作时使用 useState 和一条消息，但没有用...

当我登录并尝试转到“/form”时，我的应用程序发现我的 useStates 为假并自动将我重定向到“/login”并且不等待我的提取结束。 ..

我该如何解决？

import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
import Login from './views/Login';
import Logout from './views/Logout';
import AddUser from './views/AddUser';
import Movies from './views/Movies';
import Table_data from './components/Table_data';
import NavbarMenu from './views/NavbarMenu';
import { useSelector, useDispatch } from 'react-redux';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import { useEffect, useState } from 'react';
import { globalRequestParameters, url } from './utils';


function App() {
  const dispatch = useDispatch();
  const data = useSelector((state) => state.users.data);
  const [loggedIn, setLoggedIn] = useState(false);
  const [finishedCheking, setFinishedChecking] = useState(false);

  useEffect(() => {
    if (!data.length) {
      let requestParameters = globalRequestParameters;
      fetch(url + 'users', requestParameters)
        .then(res => res.json()
          .then(res => {
            if (res.message) {
              dispatch({ type: 'setUsers', payload: res.data })
            }
          })
        )
    }

    if (localStorage.getItem('is_logged_in')) {
      let check_loggedIn = JSON.parse(localStorage.getItem('is_logged_in'));
      let requestParam = globalRequestParameters;
      requestParam.method = 'POST';
      requestParam.headers.Authorization = JSON.stringify(check_loggedIn);
      fetch(url + 'check', requestParam)
          .then(res => res.json()
              .then(res => {
                  if (res.loggedIn === true) {
                    setLoggedIn(true);
                    setFinishedChecking(true);
                  }
              })
          )
    }
      
  }, [])

  return (
    <div>
      <NavbarMenu />
      {finishedCheking === false ? 
        <div>Loading...</div>
        :
        loggedIn === false ? 
        <Router>
          <Routes>
            <Route exact path="/" element={<Table_data />} />
            <Route exact path="/login" element={<Login />} />
            <Route exact path="/logout" element={<Logout />} />
            <Route exact path="/form" element={<AddUser />} />
            <Route exact path="/movies" element={<Movies />} />
          </Routes>
        </Router>
        :
        <Router>
        <Routes>
          <Route exact path="/" element={<Table_data />} />
          <Route exact path="/login" element={<Login />} />
          <Route exact path="/logout" element={<Logout />} />
          <Route exact path="/form" element={<Navigate replace to="/login" />}/>
          <Route exact path="/movies" element={<Movies />} />
        </Routes>
      </Router>
      }
    </div>
  );
}

export default App;

Answer 1

那是因为 fetch 有 then 这是一个承诺，这意味着它会在完成后解决它并在那个时候返回它。
要解决这个问题，您需要 const res = fetch(url + 'users', requestParameters) 并以相同的方式进一步使用它

Answer 2

用 {finishedChecking === true 包裹你的两个路由器？ {两个路由器}：<>/>}。在 promise 中。然后将 finishedChecking 的值更改为 true。状态更改后，jsx 将再次呈现并进入条件，您将确保在那里您已经解决了您的承诺。如果您需要多个条件，那么您可以将它们堆叠起来 {finishedChecking === true && anotherVariable === true ? {两个路由器} : <> } 并在其他承诺中更改它们。

React中如何写动态路由？

How to write dynamic routing in React?

javascript

reactjs

redux

react-router-dom

use-state