React router使用的方法

最新推荐文章于 2024-08-25 09:57:22 发布

Vesper63

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量330

点赞数 13

分类专栏： react 文章标签： react.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_45687669/article/details/137789466

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了一个使用ReactRouterv6的示例，通过设置路由规则并创建Home、About和Contact页面组件，展示了如何根据URL路径渲染不同组件。

摘要由CSDN通过智能技术生成

以下是一个使用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组件，它包含导航链接到其他页面。

Vesper63

关注

13
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
React router使用的方法

以下是一个使用React Router v6的简单示例，展示了如何设置路由并渲染不同的页面组件。，React Router将根据配置的路由渲染对应的页面组件。然后，我们将设置一个路由配置，根据URL路径渲染相应的组件。在这个示例中，我们创建了三个页面组件，并在。现在，当用户访问不同的URL路径时，例如。，React会将应用挂载到这个元素上。组件，它包含导航链接到其他页面。则是当路径匹配时要渲染的组件。- 应用的入口文件，渲染。首先，确保你已经安装了。文件中有一个根元素，如。定义了路由的路径，而。
复制链接

扫一扫

专栏目录