使用 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>
);

这是播放器页面：

PlayerPage.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>;

最后，

App.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 不是必需的。无论如何，代码运行良好，您应该尝试在新环境中重新创建。和平！

Answer 2

在每个路径属性前加一个“/”，我认为你应该阅读react-router-dom docs

Answer 3

问题出在App.tsx文件中，将element属性改为component，将通用路由移至底部并添加准确 在特定路线的前面。 请参阅以下更改：- `

/** @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 exact path="/Players" component={<PlayersPage />} />
      <Route exact path="/Player" component={<PlayerPage />} />
      <Route exact path="/Create" component={<PlayerCreatePage />} />
      <Route path="/" component={<HomePage />} /> 
     <Route path="*" component={<NotFoundPage />} />
    </Routes>
  </div>
</BrowserRouter>

); }

导出默认应用； ` 它会起作用的。