路由的基本使用（React Router6）

richest_qi

已于 2022-06-07 09:01:07 修改

阅读量292

点赞数

分类专栏： React17/18 文章标签： React Router6 BrowserRouter NavLink Routes Router

于 2022-06-06 20:41:13 首次发布

本文链接：https://blog.csdn.net/qzw752890913/article/details/125150258

版权

React17/18 专栏收录该内容

67 篇文章 4 订阅

订阅专栏

文章目录

React Router6 与 React Router5.x
路由的基本使用

React Router6 与 React Router5.x

相比与React Router5.x，React Router6 有如下变化：

内置组件的变化：移除Switch组件，新增Routes组件；移除Redirect组件，新增Navigate组件。
语法的变化：<Route component={About}/>变更为<Route element={<About/>} />；
新增Hook：useParams、useMatch、useNavigate等；
官方推荐函数式组件；
…

路由的基本使用

create-react-app router_app，创建react项目：router_app。默认使用当前react的最新版本：react@18、react-dom@18。
npm install -save react-router-dom，默认下载安装最新版本r：react-router-dom@6。

涉及的文件包括：

模板文件index.html
入口文件index.js
入口组件App.js
路由组件pages/Home/index.jsx，即Home组件
路由组件pages/About/index.jsx，即About组件

在这里插入图片描述

模板文件index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.css">
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

入口文件index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import {BrowserRouter} from "react-router-dom";
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
);

注意点：<BrowserRouter></BrowserRouter>。

入口组件App.js

import React from 'react'
import About from "./pages/About";
import Home from "./pages/Home";
import {NavLink,Route,Routes} from "react-router-dom";

export default function App() {
  return (
    <div>
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header"><h2>Vue Router Demo</h2></div>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            <NavLink className="list-group-item"  to="/about">About</NavLink>
            <NavLink className="list-group-item"  to="/home">Home</NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              <Routes>
                <Route path="/about" element={<About/>}></Route>
                <Route path="/home" element={<Home/>}></Route>
              </Routes>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

注意点：

路由链接。
<NavLink className="list-group-item" to="/about">About</NavLink>
注册路由。
<Routes> <Route path="/about" element={<About/>}></Route> </Routes>

pages/Home/index.jsx（Home组件）

import React from 'react'

export default function Home() {
  return (
    <h2>我是Home的内容</h2>
  )
}

pages/About/index.jsx（About组件）

import React from 'react'

export default function About() {
  return (
    <h2>我是About的内容</h2>
  )
}

richest_qi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录