• 静态页面：页面里的数据是写死的
• 动态页面：页面里的数据是动态填充的
  • 后端渲染：数据在后端填充
  • 前端渲染：数据在前端填充

• VSCODE安装插件：Auto Import - ES6, TS, JSX, TSX
• 安装Route组件：npm i react-router-dom

• BrowserRouter：所有需要路由的组件，都要包裹在BrowserRouter组件内
• Link：跳转到某个链接，to属性表示跳转到的链接
• Routes：类似于C++中的switch，匹配第一个路径
• Route：路由，path属性表示路径，element属性表示路由到的内容

解析URL：

} />

获取参数，类组件写法：

import React, { Component } from 'react';
import { useParams } from 'react-router-dom';

class Linux extends Component {
    state = {  } 
    render() {
        console.log(this.props.params);
        return 
Linux
;
    }
}

export default (props) => (
    ...props}
        params={useParams()}
    />
)

函数组件写法：

import React, { Component } from 'react';
import { useParams } from 'react-router-dom';

const Linux = () => {
    console.log(useParams());
    return (
Linux
);
}

export default Linux;

类组件写法：

import React, { Component } from 'react';
import { useSearchParams } from 'react-router-dom';

class Django extends Component {
    state = {
        searchParams: this.props.params[0],  // 获取某个参数
        setSearchParams: this.props.params[1],  // 设置链接中的参数，然后重新渲染当前页面
    }

    handleClick = () => {
        this.state.setSearchParams({
            name: "abc",
            age: 20,
        })
    }

    render() {
        console.log(this.state.searchParams.get('age'));
        return 
this.handleClick}>Django
;
    }
}

export default (props) => (
    ...props}
        params={useSearchParams()}
    />
);

函数组件写法：

import React, { Component } from 'react';
import { useSearchParams } from 'react-router-dom';

const Django = () => {
    let [searchParams, setSearchParams] = useSearchParams();
    console.log(searchParams.get('age'));
    return (
Django
);
}

export default Django;

使用Navigate组件可以重定向。

  } />

}>
    
a
} />
    
b
} />
    
c
} />

注意：需要在父组件中添加组件，用来填充子组件的内容。