我需要帮助了解如何使用 React-Router 设置从
Navbar
登录按钮到 Login
页面的导航。
app.js
import React from 'react';
import Header from './comp/Header';
import Howitworks from './comp/Howitworks';
import About from './comp/About';
import Agent from './comp/Agent';
function App() {
return (
<div className="App">
<Header/>
<Howitworks/>
<About/>
<Agent/>
</div>
);
}
export default App;
index.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<>
<App />
</>,
document.getElementById('root')
);
标题.jsx
import React from 'react';
import Navbar from './Navbar';
function Header() {
return (
<div className='header'>
<Navbar/>
<div className='intro'>
<p>Looking for a Property !</p>
<h1><span>Buy </span>and<span> Sell</span> Properties</h1>
<p className='details'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, quae?<br/> by Hemdan</p>
<a href='#' className='header-btn'>Details</a>
</div>
</div>
)
}
export default Header;
导航栏.jsx
import React from 'react';
import logo from '../images/logo1.png';
function Navbar() {
return (
<nav>
<a href='#' className='logo'>
<img src={logo} alt='logo' />
</a>
<input className='menu-btn' type='checkbox' id='menu-btn'/>
<label className='menu-icon' for='menu-btn'>
<span className='nav-icon'></span>
</label>
<ul className='menu'>
<li><a href='#'className='active'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Sell</a></li>
<li><a href='#'>Buy</a></li>
</ul>
<a href='#' className='property'>Login</a>
</nav>
)
}
export default Navbar;
尽管在浏览器中尝试了各种解决方案,但我仍然很难找到正确的解决方案来解决我的 React 导航问题。
我强烈建议从 React-Router Tutorial 开始并阅读官方文档,但至少你需要 3 件事。
示例:
App - 导入路由器并在特定路由上渲染页面内容。
import React from 'react';
import {
BrowserRouter,
Routes,
Route,
} from 'react-router-dom';
import Header from './comp/Header';
import Howitworks from './comp/Howitworks';
import About from './comp/About';
import Agent from './comp/Agent';
function App() {
return (
<BrowserRouter>
<div className="App">
<Header />
<Routes>
<Route path="/" element={/* home page */} />
<Route path="/howitworks" element={<Howitworks />} />
<Route path="/about" element={<About />} />
<Route path="/buy" element={<Agent />} />
<Route path="/sell" element={<Agent />} />
<Route path="/login" element={/* log-in page */} />
</Routes>
</div>
</BrowserRouter>
);
}
导航栏 - 导入和渲染
Link
组件而不是原始锚标记。
import React from 'react';
import { Link } from 'react-router-dom';
import logo from '../images/logo1.png';
function Navbar() {
return (
<nav>
<Link to='/' className='logo'>
<img src={logo} alt='logo' />
</Link>
<input className='menu-btn' type='checkbox' id='menu-btn' />
<label className='menu-icon' for='menu-btn'>
<span className='nav-icon'></span>
</label>
<ul className='menu'>
<li><Link to='/' className='active'>Home</Link></li>
<li><Link to='/about'>About</Link></li>
<li><Link to='/sell'>Sell</Link></li>
<li><Link to='/buy'>Buy</Link></li>
</ul>
<Link to='/login' className='property'>Login</Link>
</nav>
);
}