使用 react-router 切换页面，但我的道具不显示，这是路由器版本问题吗？

Question

我正在尝试使用我编写的代码渲染道具，但是，只有我的 header 显示。我的“关于”页面也能正常显示。

这是我在主页上时显示的警告消息 “index.tsx:25 位置“/”处的匹配叶路由没有元素。这意味着默认情况下它将呈现一个空值，从而导致“空”页面。”

VScode 也在强调“道具”，知道为什么吗？

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Header from "./components/layout/Header";
import Todos from "./components/Todos";
import AddTodo from "./components/AddTodo";
import About from "./components/pages/About";
import "./App.css";

  render() {
    return (
      <Router>
        <div className="App">
          <div className="container">
            <Header />
            <Routes>
              <Route
                path="/"
                exact
                render={(props) => (
                  <React.Fragment>
                    <AddTodo addTodo={this.addTodo} />
                    <Todos
                      todos={this.state.todos}
                      markComplete={this.markComplete}
                      delTodo={this.delTodo}
                    />
                  </React.Fragment>
                )}
              ></Route>
              <Route path="/about" element={<About />}></Route>
            </Routes>
          </div>
        </div>
      </Router>
    );
  }
}

export default App;

Answer 1

在 react-router-dom v6 中，Route 组件不再有 render 或 component 属性，所有路由都渲染它们的组件，as JSX，在 element 道具上。也不再有 exact 道具，因为所有路线现在总是完全匹配。

<Routes>
  <Route
    path="/"
    element={
      <React.Fragment>
        <AddTodo addTodo={this.addTodo} />
        <Todos
          todos={this.state.todos}
          markComplete={this.markComplete}
          delTodo={this.delTodo}
        />
      </React.Fragment>
    }
  />
  <Route path="/about" element={<About />} />
</Routes>

VScode is also underlining "props", any idea why?

据我所知，props 未被使用，因此 VSCode/linter 可能将其标记为已声明但未使用。将鼠标悬停在 props 应该弹出一个带有解释和“按钮”的小 window 来尝试为您解决问题。尽管正如我上面所解释的那样，但不再有 render 道具将函数传递给。

Answer 2

这段代码对我有用。

<Routes>
          <Route
            path="/"
            element={
              <React.Fragment>
                <AddTodo addTodo={addTodo} />
                <Todos
                  todos={todos}
                  onDelete={onDelete}
                />
              </React.Fragment>
            }
          />
          <Route path="/about" element={<About />} />
</Routes>

此外，在开头导入这个

import * as React from 'react'

使用 react-router 切换页面，但我的道具不显示，这是路由器版本问题吗？

Using react-router to switch between pages but my props aren't displaying, is this a router version issue?

reactjs

react-router

react-router-dom

react-props