我在我的 React js 应用程序中创建了一个 Navbar.js 组件。我面临的问题是我的导航栏锚文本没有显示。当我删除 Bootstrap 的“collapse”类时,显示了文本,但折叠功能无法正常工作。
这是我的 NAVBAR 组件
import React from 'react'
import { Link } from 'react-router-dom'
export default function Navbar() {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">
<Link className="navbar-brand" to="/about">Navbar</Link>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item">
<Link className="nav-link" aria-current="page" to="/">Home</Link>
</li>
<li className="nav-item">
<Link className="nav-link" aria-current="page" to="/about">About</Link>
</li>
</ul>
</div>
</div>
</nav>
)
}
改变这个...
<Link className="navbar-brand" to="/about">Navbar</Link>
...到此(对于所有链接)。
<div className="navbar-brand" to="/about">Navbar</div>
index.tsx
import * as React from 'react';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import App from './App';
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);
index.html
<div id="root"></div>
App.tsx
import * as React from 'react';
import './style.css';
export default function App() {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">
<div className="navbar-brand" to="/about">
Navbar
</div>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item">
<div className="nav-link" aria-current="page" to="/">
Home
</div>
</li>
<li className="nav-item">
<div className="nav-link" aria-current="page" to="/about">
About
</div>
</li>
</ul>
</div>
</div>
</nav>
);
}
package.json
{
"name": "react-ts",
"version": "0.0.0",
"private": true,
"dependencies": {
"@popperjs/core": "^2.11.6",
"@types/react": "^18.0.8",
"@types/react-dom": "^18.0.2",
"bootstrap": "^5.2.3",
"react": "^18.1.0",
"react-dom": "^18.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"react-scripts": "latest"
}
}