即使嘗試使用 Routes 和 Router，路由也無法正常工作

Question

我正在關注本教程： https://ibaslogic.com/routing-with-react-router/

當我呈現頁面時，我收到此錯誤

Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.
    at invariant (bundle.js:61876)
    at Route (bundle.js:62025)
    at renderWithHooks (bundle.js:23504)
    at mountIndeterminateComponent (bundle.js:26266)
    at beginWork (bundle.js:27465)
    at HTMLUnknownElement.callCallback (bundle.js:12454)
    at Object.invokeGuardedCallbackDev (bundle.js:12503)
    at invokeGuardedCallback (bundle.js:12563)
    at beginWork$1 (bundle.js:32305)
    at performUnitOfWork (bundle.js:31141)

正如警告所暗示的那樣，我試圖將Route包裝在Routes中。 我仍然收到一個錯誤，我需要我已經擁有的Router 。 我也試過這里的建議react-router，路線沒有成功

這是發生錯誤的我的js組件文件：

import React, { useState, useEffect } from "react"
import TodosList from "./TodosList";
import Header from "./Header";
import InputTodo from "./InputTodo";
import { v4 as uuidv4 } from "uuid";
import "./App.css"
import { Route, Switch } from "react-router-dom"

const TodoContainer = () => {
  const [todos, setTodos] = useState(getInitialTodos())

  const handleChange = id => {
    setTodos(prevState =>
      prevState.map(todo => {
        if (todo.id === id) {
          return {
            ...todo,
            completed: !todo.completed,
          }
        }
        return todo
      })
    )
  }

  const delTodo = id => {
    setTodos([
      ...todos.filter(todo => {
        return todo.id !== id
      }),
    ])
  }

  const addTodoItem = title => {
    const newTodo = {
      id: uuidv4(),
      title: title,
      completed: false,
    }
    setTodos([...todos, newTodo])
  }

  const setUpdate = (updatedTitle, id) => {
    setTodos(
      todos.map(todo => {
        if (todo.id === id) {
          todo.title = updatedTitle
        }
        return todo
      })
    )
  }

  // useEffect(() => {
  //   console.log("test run")
  
  //   // getting stored items
  //   const temp = localStorage.getItem("todos")
  //   const loadedTodos = JSON.parse(temp)
  
  //   if (loadedTodos) {
  //     setTodos(loadedTodos)
  //   }
  // }, [])

  function getInitialTodos() {
    // getting stored items
    const temp = localStorage.getItem("todos")
    const savedTodos = JSON.parse(temp)
    return savedTodos || []
  }

  useEffect(() => {
    // storing todos items
    const temp = JSON.stringify(todos)
    localStorage.setItem("todos", temp)
  }, [todos])

  

  return (
    <Route path="/">
      <div className="container">
        <div className="inner">
          <Header />
          <InputTodo addTodoProps={addTodoItem} />
          <TodosList
            todos={todos}
            handleChangeProps={handleChange}
            deleteTodoProps={delTodo}
            setUpdate={setUpdate}
          />
        </div>
      </div>
    </Route>
  )
}

export default TodoContainer

這是我的 index.js：

import React from "react"
import ReactDOM from "react-dom"
//component file
import TodoContainer from "./functionBased/components/TodoContainer"
import { BrowserRouter as Router } from "react-router-dom"

//stylesheet
import "./functionBased/App.css"

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <TodoContainer />
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
)

我不確定如何使Route工作。 謝謝

Answer 1

不確定我是否正確理解了問題，但也許可以嘗試在 index.js 中進行更改

<TodoContainer />

和：

<Route exact path="/" element={<TodoContainer />}/>

還記得從 react-router-dom 導入 Route

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

Esteban Herrera 的這篇博文給出了如何使用 React 路由器的一個很好的例子。 https://blog.logrocket.com/react-router-dom-tutorial-examples/

Answer 2

我認為你需要做這樣的事情：

• 從組件文件夾中刪除 Route 標記
• 像這樣將 Route 標記添加到您的 index.js 文件中

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

...

 <Router>
     <Route exact path="/" element={<TodoContainer />}/>
 </Router>

Answer 3

您應該在Routes組件中聲明您的Route 。 所以你應該先將TodoContainer包裹在Routes組件中，然后將要渲染的元素放入Route組件的element屬性中

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <Routes>
        <Route path="/" element={<TodoContainer />}/>
      </Routes>
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
)

然后，您無需再在TodoContainer中處理路由

查看文檔以了解有關路由的更多信息（這里是 react router v6）