反应路由器 dom 安装 - Javascript (1)

📌 相关文章

📜 反应路由器 dom 安装 - Javascript (1)

📅 最后修改于: 2023-12-03 14:50:35.395000 🧑 作者: Mango

反应路由器 dom 安装 - Javascript

React Router是一个广受欢迎的React库，它可以帮助程序员在React应用程序中实现路由。它可以让程序员通过定义引用组件的URL来管理应用程序的路由。程序员可以在浏览器地址栏中键入URL或单击链接来访问特定的URL并在应用程序中加载相应的组件。

在本文中，我们将讨论如何使用React Router在应用程序中设置路由器并将其与DOM元素集成。我们将以下面的HTML代码为例：

<!DOCTYPE html>
<html>
	<head>
		<title>React Router DOM</title>
	</head>
	<body>
		<div id="root"></div>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/5.2.0/react-router-dom.min.js"></script>
		<script src="./index.js"></script>
	</body>
</html>

我们首先需要添加React和ReactDOM以及React Router DOM库。接下来，在使用React Router时，我们需要将组件包装在Router组件中。Router组件是React Router的基础，它为应用程序提供路由功能。在Router组件中，我们将使用Route组件来定义每个路由的路径和相应的组件。例如，以下代码将为URL路径为'/'的路由指定Home组件，并为路径为'/about'的路由指定About组件：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';

const App = () => (
  <Router>
    <div>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  </Router>
);

ReactDOM.render(<App />, document.getElementById('root'));

在上面的代码中，我们将Home和About组件作为'component'属性传递给Route组件。'exact'属性告诉React Router只有在URL路径精确匹配时才应该匹配该路由。如果我们不使用'exact'属性，则在路径'/about'上的第一个路由 / 也会匹配，并且我们将看到两个组件同时加载在DOM元素中。最后，我们通过调用ReactDOM.render()将我们的应用程序渲染到DOM元素中。

这是React Router DOM的基础，程序员可以根据自己的需要进行扩展。它提供了很多有用的功能和组件，例如Switch和Link。Switch组件使得程序员可以将多个路由组成一个单元，Link组件可以用来创建链接到特定URL路径的超链接。