React -- router的使用

最新推荐文章于 2024-07-27 11:38:12 发布

littleHiuman

最新推荐文章于 2024-07-27 11:38:12 发布

阅读量226

点赞数

分类专栏： javascript 文章标签： reactjs

本文链接：https://blog.csdn.net/hiumanChung/article/details/115405267

版权

本文介绍了如何在React中使用react-router-dom进行基本路由配置，包括嵌套路由和参数传递。同时，提到了如何实现路由重定向。

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

首先要引入 react-router-dom 这里依赖包

基本路由的使用：

import React from 'react'
import {
  BrowserRouter as Router, // 浏览器路由，要放在应用程序的最外层组件中
  Route, // 设置/匹配路由规则
  Link, // 设置链接
  Switch
} from 'react-router-dom'

// 组件
function Home() {
  return <h2>Home</h2>
}

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

function Users() {
  return <h2>Users</h2>
}

// 路由配置
export default function App() {
  return (
    <Router>
      <div>
        <div>
          <Link to="/">Home</Link><br />
          <Link to="/about">About</Link><br />
          <Link to="/users">Users</Link>
        </div>

        {/* 显示匹配的组件内容*/}
        <Switch>
          {/* 以下两种写法都可以 */}
          <Route path="/about">
            <About />
          </Route>