react-router-dom 没有渲染我的组件

Question

我正在尝试使用 react JS 制作一个简单的注册程序，但是当它无法呈现我的 App 和 Register 组件时卡住了。

 import React from "react";
 import ReactDOM from "react-dom";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import App from "./App";
 import Register from "./screens/Register";

 ReactDOM.render(
 <BrowserRouter>
  <Routes>
   <Route path="/" exact render={(props) => <App {...props} />} />
   <Route
    path="/register"
    exact
    render={(props) => <Register {...props} />}
    />
  </Routes>
 </BrowserRouter>,
 document.getElementById("root")
 );

Answer 1

据我所知，react-router@v6 的route组件中没有任何类似于render的道具。 在您的页面中可以使用挂钩来获取与路由相关的数据。 您可以在官方文档中找到它们。 （考虑阅读有关从 v5 或 react-router 迁移的链接）。

当然，您仍然可以在组件中传递常规道具。 在此处查看有关 Stackblitz 的示例，这是代码：

import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Routes, Link, Route } from 'react-router-dom';
import './style.css';

const Page1 = (props) => <Link to="page2"> {props.test} - Go to Page 2</Link>;
const Page2 = () => <Link to="/">Go to Page 1</Link>;

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" exact element={<Page1 test="Test" />} />
        <Route path="/page2" exact element={<Page2 />} />
      </Routes>
    </BrowserRouter>
  );
};

render(<App />, document.getElementById('root'));