react-router怎么用

React Router 是 React 官方提供的路由库，主要用于处理 Web 应用的页面导航。React Router 提供了多种路由方式，包括基于 URL 的路由、嵌套路由、动态路由等。

下面是使用 React Router 的基本步骤：

安装 React Router

使用 npm 安装 React Router：

npm install react-router-dom

导入 Router 组件

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

定义路由

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

export default App;

创建路由组件

// Home.js
import React from 'react';

function Home() {
  return <h2>Home</h2>;
}

export default Home;

// About.js
import React from 'react';

function About() {
  return <h2>About</h2>;
}

export default About;

// Contact.js
import React from 'react';

function Contact() {
  return <h2>Contact</h2>;
}

export default Contact;

在上面的例子中，我们定义了三个路由：首页、关于页面和联系页面。当用户在浏览器中输入相应的 URL 时，React Router 会自动匹配对应的路由组件进行渲染。

注意，我们在路由组件中使用了 exact 属性来表示精确匹配，这样可以避免路由重叠的问题。

使用 Link 组件进行页面跳转

import React from 'react';
import { Link } from 'react-router-dom';

function Header() {
  return (
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>
      <li><Link to="/contact">Contact</Link></li>
    </ul>
  );
}

export default Header;

在上面的例子中，我们使用 Link 组件来实现页面跳转。Link 组件会自动将 URL 转换为浏览器可识别的 HTML 超链接，点击链接时会触发路由切换。

React Router 还提供了其他功能，如路由传参、重定向、嵌套路由等。具体用法可以参考官方文档。