即使在嘗試使用路由和路由器時，路由也不起作用

我正在關注本教程：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, routes not work without success

這是發生錯誤的我的 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作業。謝謝

uj5u.com熱心網友回復：

你應該Route在Routes組件中宣告你的。所以，你應該先包裹TodoContainer的Routes組件，然后把你要渲染的元素中element的財產Route部分

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

然后，您不再需要在 TodoContainer

查看檔案以了解有關路由的更多資訊（這里是 react router v6）

uj5u.com熱心網友回復：

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

<TodoContainer />

和：

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

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

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

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

uj5u.com熱心網友回復：

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

• 從組件檔案夾中洗掉 Route 標簽
• 像這樣將 Route 標記添加到您的 index.js 檔案中

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

...

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

標籤：javascript 反应 路线 反应路由器

上一篇：將按鈕添加到最后一列

下一篇：JavaScript驗證重復第一個錯誤修復