即使尝试使用路由和路由器，路由也无法正常工作

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 (bundle.js:32305)
    at performUnitOfWork (bundle.js:31141)

我已经尝试按照警告的建议将 Route 包裹在 Routes 中。我仍然收到我需要 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导入Route-dom

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

Esteban Herrera 的这篇博文提供了一个关于如何使用 React 路由器的很好示例。 https://blog.logrocket.com/react-router-dom-tutorial-examples/

Answer 2

我认为你需要做这样的事情：

从您的组件文件夹中删除路由标签
像那样将路由标记添加到您的 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

中就不需要再处理路由了

查看 documentation 以了解有关路由的更多信息（这里是 react router v6）

即使尝试使用路由和路由器，路由也无法正常工作

Routes not working in react even when trying to use Routes and Router

javascript

routes

reactjs

react-router