以下是一个使用React Router v6的简单示例,展示了如何设置路由并渲染不同的页面组件。
首先,确保你已经安装了react-router-dom
。如果还没有安装,可以使用以下命令安装:
npm install react-router-dom@6
接下来,我们将创建三个简单的页面组件:Home
、About
和Contact
。然后,我们将设置一个路由配置,根据URL路径渲染相应的组件。
Home.js
- 首页组件:
import React from 'react';
function Home() {
return (
<div>
<h2>Home Page</h2>
<p>Welcome to the home page.</p>
<nav>
<ul>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/contact">Contact</a>
</li>
</ul>
</nav>
</div>
);
}
export default Home;
About.js
- 关于页面组件:
import React from 'react';
function About() {
return (
<div>
<h2>About Page</h2>
<p>This is the about page.</p>
</div>
);
}
export default About;
Contact.js
- 联系页面组件:
import React from 'react';
function Contact() {
return (
<div>
<h2>Contact Page</h2>
<p>Contact us at info@example.com</p>
</div>
);
}
export default Contact;
App.js
- 应用的主组件,设置路由:
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
function App() {
return (
<Router>
<div>
<h1>My Web Application</h1>
<Routes>
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
<Route path="/" element={<Home />} />
</Routes>
</div>
</Router>
);
}
export default App;
index.js
- 应用的入口文件,渲染App
组件:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css'; // 引入全局CSS样式
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
确保你的index.html
文件中有一个根元素,如<div id="root"></div>
,React会将应用挂载到这个元素上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
在这个示例中,我们创建了三个页面组件,并在App
组件中使用BrowserRouter
和Routes
来配置路由。每个Route
组件都有一个path
属性和一个element
属性。path
定义了路由的路径,而element
则是当路径匹配时要渲染的组件。
现在,当用户访问不同的URL路径时,例如/about
或/contact
,React Router将根据配置的路由渲染对应的页面组件。根路径/
将渲染Home
组件,它包含导航链接到其他页面。