为什么 React 导航不加载新页面？

Question

我正在尝试构建一个反应应用程序，但导航似乎无法正常工作。当我加载页面时，它显示带有“推文”和“创建推文”的导航栏，但单击它们不会加载页面。我正在使用带有。

我一整天都在研究这个问题，但似乎无法弄清楚。知道我做错了什么吗？

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

import App from './App';
import { BrowserRouter } from 'react-router-dom';
import reportWebVitals from './reportWebVitals';

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

App.js:

import React from 'react';
import { 
  BrowserRouter as Router,
  Routes, 
  Route,
  Link
} from "react-router-dom";
import { TweetList } from './TweetList';
import { CreateTweet } from './CreateTweet';

function App() {
  return (
      <div>
        <nav className="navbar bg-light navbar-expand-lg navbar-light">
          <ul className="navbar-nav mr-auto">
            <li className="navbar-item">
              <Link to="/" className="nav-link">Tweets</Link>
            </li>
            <li className="navbar-item">
              <Link to="/create" className="nav-link">Create Tweet</Link>
            </li>
          </ul>
        </nav>
        <Routes>
          <Route exact path="/" element={TweetList} />
          <Route path="/create" element={CreateTweet} />
        </Routes>

      </div>
  );
}

export default App;

TweetList.js:

import React, { useState, useEffect } from "react";
import { Link } from 'react-router-dom'
   
  return (
    <div className="container">
      <div className="mt-3">
        <h3>Tweet List</h3>
        <table className="table table-striped mt-3">
          <thead>
            <tr>
              <th>Text</th>
              <th>Action</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  );
};

CreateTweet:

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

export const CreateTweet = () => {
    return (
        <div className="container">
            <div className="mt-3">
                <h3>Create Tweet Item</h3>
            </div>
        </div>
    );
}

package.json:

{
  "name": "twitter-clone",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.1.3",
    "react": "^17.0.2",
    "react-bootstrap": "^2.1.2",
    "react-dom": "^17.0.2",
    "react-hook-form": "^7.27.1",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

编辑 1：这是我正在处理的文件的存储库： https://github.com/adam-weiler/twitter-clone

编辑2： 通过更改 App.js 中的这两行，它现在似乎可以工作：

不起作用：

<Route path="/" element={TweetList} />
<Route path="/create" element={CreateTweet} />

工作：

<Route path="/" element={<TweetList />} />
<Route path="/create" element={<CreateTweet />} />

Answer 1

首先，您忘记将 Routes 元素包装在您导入的 Router 中，但未添加到返回的 jsx 中。
将 div 包裹在 ... 内应该可以解决路由问题。

其次，您传递给 Route.element 属性的是一个组件而不是元素，我建议使用 Route.component 属性或 Route.render 需要一个返回元素的函数。