react-router-dom路由的基本使用

在react中启用路由模块，首先要装包：npm i react-router-dom -S，装完之后在根组件中导入：import {HashRouter, Route, Link} from "react-router-dom"。

• HashRouter:表示一个路由的根容器，将来，所有路由相关的东西，都要包裹在HashRouter里面，而且，一个网站中，只需要使用一次HashRouter就好了。HashRouter内部只能有一个节点。
• Route:表示一个路由规则，在Route上，有两个比较重要的属性：path和component。path表示需要匹配的路由，component指定与路由相关的组件。Route有占位符的功能，即将其写在哪里，将来组件就在哪里展示。
• Link:表示一个路由的链接。

下面通过实际的例子展示React中路由的基本使用：
App.jsx根组件：

import React from "react"
import {HashRouter, Route, Link} from "react-router-dom"

import Home from "@/components/Home";
import Movie from "@/components/Movie";
import About from "@/components/About";

class App extends React.Component{
    constructor(props) {
        super(props);
        this.state = {}
    }
    render(){
        return <HashRouter>
            <div>
                <h1>这是网站的App根组件</h1>
                <hr/>
                <Link to="/home">首页</Link>&nbsp;&nbsp;
                <Link to="/movie">电影</Link>&nbsp;&nbsp;
                <Link to="/about">关于</Link>
                <hr/>
                <Route path="/home" component={Home}></Route>
                <Route path="/movie" component={Movie}></Route>
                <Route path="/about" component={About}></Route>
            </div>
        </HashRouter>
    }
}

export default App;

运行结果如下：



可以看到地址栏已成功启动了路由功能，且三个子组件能够通过链接正确的路由。