React-router-dom v6 路由显示空白页面

Question

我将一个页面路由到根目录，但无论我使用什么 js 文件，它都显示为空白页面。不知道出了什么问题，从去年开始就没有使用过 React，但看起来他们已经更新了 React-router-dom，所以它不再使用 Switch。有人知道正确的语法以便页面显示吗？以下是文件：

WebRoutes.js

import React from "react";
import { Routes, Route } from 'react-router-dom';
import { useNavigate } from "react-router-dom";

// Webpages
import App from './App';
import Welcome from './welcome';
import SignUp from './Signup'

export default function WebRoutes() {
  return (
    <Routes>
      <Route path='/'>
       <Welcome />
      </Route>
    </Routes>
  );
}

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import WebRoutes from './WebRoutes';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <WebRoutes />
  </React.StrictMode>,
  document.getElementById('root')
);

Answer 1

在react-router-dom@6组件中Route，不会将路由内容渲染为子级，而是使用elementprop. 在构建嵌套路由的情况下，其他Route组件是 a 的唯一有效子组件。Route

export default function WebRoutes() {
  return (
    <Routes>
      <Route path='/' element={<Welcome />} />
    </Routes>
  );
}

确保您已在应用程序周围渲染了路由器。

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

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <WebRoutes />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);