javascript - 使用 react-router-dom v6 路由到新页面时，React 组件不呈现

Question

我正在尝试在我的 React 应用程序中设置路由。我没有收到任何错误并且应用程序没有中断，但是当我导航到新页面时没有显示任何内容。我正在使用 react-router-dom v6，“Switch”已替换为“Routes”，组件已替换为元素:https://reacttraining.com/blog/react-router-v6-pre/ .您似乎也不需要前导“/”。

在页面底部编辑。

http://localhost:3000/Player 和 http://localhost:3000/*(或 * 以外的任何内容)都呈现空白屏幕。

这是工作正常的着陆页:

主页.tsx

/** @jsxImportSource @emotion/react */
import React from 'react';
import { css } from '@emotion/react';
import logo from '../assets/cyberpunk.png';

export const HomePage = () => (
  <div
    css={css`
      margin: 10px auto 20px auto;
      padding: 30px 20px;
      max-width: 1000px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    `}
  >
    <div>
      <img
        src={logo}
        alt="Logo"
        css={css`
          width: 700px;
          margin-left: 130px;
        `}
      />
      <h2>Players</h2>
      <button>Select a toon</button>
    </div>
  </div>
);

这是播放器页面:

播放器页面.tsx

import React from 'react';

export const PlayerPage = () => <h2>"One toon"</h2>;

找不到页面:

NotFoundPage.tsx

import React from 'react';

export const NotFoundPage = () => <h2>"Page Not Found"</h2>;

最后，

应用.tsx

/** @jsxImportSource @emotion/react */
import React from 'react';
import { css } from '@emotion/react';
import { Header } from './header';
import { HomePage } from './Views/HomePage';
import { fontFamily, fontSize, gray2 } from './Styles';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { PlayerPage } from './Views/PlayerPage';
import { PlayersPage } from './Views/PlayersPage';
import { PlayerCreatePage } from './Views/PlayerCreatePage';
import { NotFoundPage } from './Views/NotFoundPage';

function App() {
  return (
    <BrowserRouter>
      <div
        css={css`
          font-family: ${fontFamily};
          font-size: ${fontSize};
          color: ${gray2};
        `}
      >
        <Header />
        <Routes>
          <Route path="" element={<HomePage />} />
          <Route path="Players" element={<PlayersPage />} />
          <Route path="Player" element={<PlayerPage />} />
          <Route path="Create" element={<PlayerCreatePage />} />
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

为什么不显示 NotFoundPage 和 PlayerPage 中的 h2 元素？就像我每次都导航到错误的路线一样。

我修复了它。我重新制作了其中一个页面，使其看起来像这样:

function PlayerCreatePage() {
  return (
    <div style={{ padding: 20 }}>
      <h2>About View</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adip.</p>
    </div>
  );
}

export default PlayerCreatePage;

而这个确实出现了。这是为什么？其他观点有什么问题？

Answer 1

我试图重现您的错误，但未能成功。起初，我认为你没有在函数内部编写 return() 可能是个问题，但后来我意识到你没有使用大括号导出，所以 return 不是必需的。无论如何，代码运行良好，您应该尝试在新环境中重新创建。和平!