返回

react.js—Route 不会在 React 中渲染组件

发布时间:2022-09-05 10:30:57 213
# node.js

我正在尝试使用 React 制作一个简单的导航栏,该导航栏将在页面中导航。

我正在使用路由器,您可以看到链接更改了页面,但没有呈现组件。我使用了这个导入:

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

将我的导航包装在一个标签内,包含指向路线的链接,然后使用该标签包装所有路线。

<Routes>

          <Route path="/" element={<Home />} />

          <Route path="/profile" element={<Profile />} />

          <Route path="/classes" element={<Classes />} />

        </Routes>

整个代码:

import "./App.css";

import Pdf from "./components/Pdf.js";

import data from "./data.js";

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

import Home from "./Pages/Home.js";

import Profile from "./Pages/Profile.js";

import Classes from "./Pages/Classes.js";

function App() {

  return (

    <div className="App">

      <Router>

        <nav class="navbar  fixed-top navbar-expand-sm navbar-dark bg-dark">

          <div class="container">

            <a href="#" class="navbar-brand mb-0 h1">

              App

            </a>

            <button

              class="navbar-toggler"

              type="button"

              data-bs-toggle="collapse"

              data-bs-target="#navbarNav"

              aria-controls="navbarNav"

              aria-expanded="false"

              aria-label="Toggle navigation"

            >

              Menu

            </button>

            <div

              class="collapse navbar-collapse justify-content-center customnav"

              id="navbarNav"

            >

              <ul class="navbar-nav ">

                <li class="nav-item active">

                  <Link class="nav-link active" to="/">Αρχική</Link>

                </li>

                <li class="nav-item active">

                  <Link class="nav-link active" to="/profile">Προφίλ</Link>

                </li>

                <li class="nav-item active">

                  <Link class="nav-link active" to="/classes">Classes</Link>

                </li>

              </ul>

            </div>

          </div>

        </nav>

        <Routes>

          <Route path="/" element={<Home />} />

          <Route path="/profile" element={<Profile />} />

          <Route path="/classes" element={<Classes />} />

        </Routes>

      </Router>

      

    </div>

  );

}

export default App;

它在任何地方重叠吗?

这是我的 index.js 代码:

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<React.StrictMode><App /></React.StrictMode>

);

reportWebVitals();

特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(1)
按点赞数排序
用户头像