javascript - 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>
  );
}

index.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 组件不会将路由内容渲染为子项，它们使用 element 属性。在构建嵌套路由的情况下，其他 Route 组件是 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')
);