1.react路由的基本使用

第一步

首先打开index.js,在里面引入BrowserRouter或者HashRouter,启用全局路由模式。

BrowserRouter与HashRouter的区别

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {
  BrowserRouter,
  // HashRouter
} from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
      
    
  
);

reportWebVitals();

第二部

然后在scr目录下创建pages文件夹,主要用于存放页面1.react路由的基本使用_第1张图片

第三步

然后我们打开app.js文件 引入Link, Route,Routes这几个api

Link

作用 :用于指定导航链接,完成路由跳转

语法说明: 组件通过to属性指定路由地址,最终会渲染为a链接元素

Route

作用 :用于指定导航链接,完成路由匹配

语法说明: path属性指定匹配的路径地址,element属性指定要渲染的组件

说明:当url路径为 ‘/about’ 时,会渲染 组件

Routes 作用 :提供一个路由出口,满足条件的路由组件会渲染到组件内部,定义path和组件的对应关系

 

 

然后在引入所需要的页面

// App.js
import './App.css';
import { Link, Route,Routes  } from 'react-router-dom';    // 路由插件
 
 import HOME from "./pages/home";
 import ABOUT from "./pages/about";
 
function App() {
  return (
    
首页 分类
}> }>
); } export default App;

这样一个简单的路由就实现了

 

 

 

你可能感兴趣的:(react-router,react.js)