React 显示另一个页面，然后是主页，当导航到主页时

Question

我是 React 新手，我正在使用 Traversy 速成课程和有关 React 路由器 6+ 的额外视频。

我的路线就像

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'

return (
  <div className="container">
    <Router>        
      <Header
        title='sikyona'
        onAdd={()=> setShowAddtask(!showAddTask)}
        showAdd={showAddTask}
      />
      <Routes>
        <Route 
          path='/'  
          element={
            <>
              {showAddTask && <AddTask onAdd={addTask} />}
              {tasks.length > 0
                ? <Tasks tasks={tasks} onDelete={deleteTask} />
                :<p>add tasks</p>  
              }
            </>
          } 
        />
        <Route path='/about' element={<About/>} />
      </Routes>
      <Footer />    
    </Router>  
  </div>
);

问题是，当我导航到主页 http://localhost:3000/ 时，我首先看到的是 About 页面，然后是主页（Route path='/'...）

我有"react-router-dom": "^6.4.1",

这是怎么回事，我该如何解决？

Answer 1

问题不在于应用程序第一次加载或导航到"/"时正在呈现“关于”页面或“ About ”组件。 这是该应用程序实际上在"/"上，并且还没有要显示的tasks ，并且 UI 正在渲染容器Header ，带有“添加任务”文本的Footer path="/"的Route以及呈现一个链接到"/about" 。

将此渲染的 UI 与实际的"/about"路径和About组件进行对比。

也许 UI/UX 对你来说是很好的关于这种行为和理解什么时候和什么原因呈现的确切内容。 另一方面，如果您在加载数据之前不想看到任何 UI，您可以调整代码以在获取任务时不渲染任何内容或渲染一些加载指示器。

例子：

function App() {
  const [showAddTask, setShowAddtask] = useState(false);
  const [tasks, setTasks] = useState(); // <-- initially undefined

  useEffect(() => {
    const getTasks = async () => {
      try {
        const tasks = await fetchTasks();
        setTasks(tasks); // <-- defined and populated
      } catch(error) {
        // log errors, display message, etc... or ignore
        setTasks([]); // <-- defined and empty
      }
    };
    getTasks();
  }, []);

  ...

  if (!tasks) {
    return null; // <-- return null or loading indicator/spinner/etc
  }

  return (
    <div className="container">
      <Router>
        <Header
          title="hello"
          onAdd={() => setShowAddtask(show => !show)}
          showAdd={showAddTask}
        />
        <Routes>
          <Route
            path="/"
            element={
              <>
                {showAddTask && <AddTask onAdd={addTask} />}
                {tasks.length ? (
                  <Tasks tasks={tasks} onDelete={deleteTask} />
                ) : (
                  <p>add tasks</p>
                )}
              </>
            }
          />
          <Route path="/about" element={<About />} />
          <Route path="/task-details/:id" element={<TaskDetails />} />
        </Routes>
        <Footer />
      </Router>
    </div>
  );
}

Answer 2

尝试将您的<Route path='/' />放在列表的最后。