React框架----路由管理

SPA

• single page application
• 只有一个页面
• 异步请求数据，局部更新页面
• 本地局部切换页面（不会向服务端加载整个页面）

路由

• 地址栏路径与组件的对应关系
• 切换路径，则切换组件（即局部页面）
• react-router-dom 路由管理
• Route 注册路由
• Link负责跳转
• 所有的路由相关内容放入BrowserRouter 或者HashRouter（地址带有#）内部
• Switch 包裹所有的Route，匹配到一个地址，则不再继续匹配，展示当前地址对应的组件。
• Redirect
• NavLink 可以增加激活样式

路由基本使用

• 创建项目，并安装依赖

# 新版本不能全局安装
npx create-react-app myreact
# 安装依赖
npm install -D react-router-dom@5

# 若是typescript模板，则
npm install -D @types/react-router-dom

• index.jsx 入口文件

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

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

• App.jsx 所有组件的父组件

import React from 'react';
import "./index.css"
import {Link, Route} from 'react-router-dom'
import A from './components/A';
import B from './components/B';

//函数组件
function App() {
  return (
    <div className="App">
      {/* Link负责跳转 react-router-dom@5 */}
      <Link to="/a">page a</Link>
      <Link to="/b">page b</Link>

      {/* Route负责注册路由 */}
      <Route path="/a" component={A}></Route>
      <Route path="/b" component={B}></Route>
    </div>
  );
}

export default App;

• pages 路由组件

import React from "react";
import './index.css'

//类组件
class A extends React.Component{

    render(){
        return (
            <div id="a">
                page A
            </div>
        )
    }
}

export default A

• 进入项目目录，启动项目npm start
  完成！

路由组件与一般组件

• 路由组件给Route使用，一般组件开发者使用。
• 在pages下放置路由组件，components下放置一般的组件；
• 路由组件的props可以接收到路由器传递的参数history/location/match;
  一般组件的props取决于传递了什么。

NavLink

可以给激活的连接，增加一个样式类名。

{
	//点击 哪个连接 就给它加一个样式lauf
}
<NavLink activeClassName='lauf' to="/a">page a</NavLink>
<NavLink activeClassName="lauf" to="/b">page b</NavLink>

封装NavLink
双标签中的文本为this.props.children

<MyLink a=1 b=2 c="c">我的组件</MyLink>

// 组件对象的props
this.props-->{a:1, b:2, c:"c", children: "我的组件"}