我正在参加全栈 Web 开发课程,目前正在一边学习 React,一边为我的作品集构建一个项目,希望能够进入前端 Web 开发人员的职位。
找到了这个 2 年前的教程,我认为这是一个不错的学习开始:https://www.youtube.com/watch?v=QwarZBtFoFA&t=700s,这是我尚未遇到的第三个障碍能够克服。
没有显示错误,我尝试过更改标签、移动/重命名以及寻找答案,但我似乎找不到正确的答案。
蒂亚
组件/Navbar.js
import React, { useState } from 'react';
import Logo from '../images/HHlogo.jpg';
import { Link } from 'react-router-dom';
import "../styles/Navbar.css";
function Navbar() {
return (
<div className="Navbar">
<div className="leftSide">
<img src={Logo} alt=',' />
</div>
<div className="rightSide">
<Link to="/Home">Home </Link>
<Link to="/About">About </Link>
<Link to="/Classes">Classes </Link>
<Link to="/Gallery">Gallery </Link>
<Link to="/Trainer">Trainer </Link>
<Link to="/Testimonial">Testimonial </Link>
<Link to="/Contact">Contact </Link>
</div>
</div>
);
}
export default Navbar
src/styles/Navbar.css
.navbar {
width: 100%;
height: 100px;
background-color: #121619;
display: flex;
flex-direction: row;
}
.navbar .leftSide {
flex: 50%;
height: 100%;
display: flex;
align-items: center;
padding-left: 150px;
}
.navbar .leftSide img {
width: 70px;
}
.navbar .rightSide {
flex: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.navbar a {
color: white;
text-decoration: none;
margin: 20px;
}
.navbar .rightSide button {
background-color: transparent;
border: none;
color: white;
cursor: pointer;
}
.navbar .rightSide svg {
font-size: 40px;
}
.navbar #open {
padding-left: 0px;
}
.navbar #open img {
display: none;
}
.navbar #close img {
display: inherit;
}
.navbar #open .hiddenLinks {
display: inherit;
margin-left: 30px;
}
.navbar #close .hiddenLinks {
display: none;
}
.navbar #open a {
width: 70px;
margin: 5px;
}
@media only screen and (max-width: 900px) {
.navbar .rightSide a {
width: 70px;
}
.navbar .leftSide {
padding-left: 50px;
}
}
@media only screen and (max-width: 600px) {
.navbar .rightSide a {
display: none;
}
.navbar .rightSide {
justify-content: flex-end;
padding-right: 50px;
}
.navbar .rightSide button {
display: inherit;
}
}
@media only screen and (min-width: 600px) {
.navbar .rightSide button {
display: none;
}
.hiddenLinks {
display: none;
}
}
src/App.js
import React from 'react';
import Home from './pages/Home';
import './App.css';
import Navbar from './components/Navbar';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
function App() {
return (
<div className="App">
<Router>
<Navbar />
<Routes>
<Route path="/" exact component={Home} />
</Routes>
</Router>
</div>
);
}
export default App;
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
className
中指定的Navbar
与CSS不一致。将 className="Navbar"
更新为 className="navbar"
。
此外,由于您使用的是 React-Router-DOM 6,因此
Route
应使用 element
属性并传递 JSX,并且没有 exact
属性,例如<Route path="/" element={<Home />} />
。