React从0开始：React Router(一)这是我参与11月更文挑战的第15天，活动详情查看：2021最后一次更文

这是我参与11月更文挑战的第15天，活动详情查看：2021最后一次更文挑战

我们先来了解一下Router组件，通常我们在使用路由时，我们可以使用两种路由：

BrowserRouter:http://baidu.com/index
HashRouter:http://baidu.com/#/index

我们一般使用BrowserRouter，兼容性更强

使用方法：如果要使用路由，我们需要先在React项目的入口文件index.js中使用BrowserRouter包裹住<App />组件，具体怎么使用后面会有讲解。

1.`Route`、`Link`以及`Switch`的使用

我们需要先导入Route、Link和Switch组件

import { Route,Link,Switch } from 'react-router-dom';

Switch表示一次仅加载一个路由

具体使用方法：

确定路由路径，比如/tools
点击标签路由to跳转，<Link to="/tools">工具列表</Link>

在所有标签下方使用Switch组件，包裹着Route组件，Route组件为各个路由的配置（path），如：

import Tools from './Tools';
...
    return (
        <div>
            <Link to="/tools">工具列表</Link>
        </div>
        <Switch>
            <Route path="/tools">
                <Tools />
            <Route>
            { /*或者是下面这种形式*/ }
            <Route path="/tools" component={Tools}>
        </Switch>
    )

Route中的path相当于是对Link中的to做一个匹配，匹配成功的则会显示Tools组件

注意：在路由的时候，我们要注意path这一个属性，在路由时，如果path为/，那么/tools、/home等/开头路径的组件也会被渲染，因此需要加上exact属性

return (
    <div>
        <Link to="/">首页</Link>
    </div>
    <Switch>
        <Route exact path="/" component={Tools} />
    </Switch>
)

2. 路由的传参

路由的使用有三种传参：

params传参

在Route path中配置：path="/user/:id"，则可传入ID(/user/1)

使用：在跳转到的组件中获取ID：this.props.match.params.id

//父组件
return (
    <div>
        <Link to="/">首页</Link>
        <Link to="/user/1">用户中心</Link>
    <div>
    <Switch>
        <Route exact path="/" component={Tools} />
        <Route exact path="/user/:id" component={User} />
    </Switch>
)
//子组件
return (
    <div>
        <h1>欢迎：{this.props.match.params.id}</h1>
    <div>
)

query传参

不修改Route path，在跳转路由的元素上绑定一个函数，函数内利用this.props.history.push({pathname:'/user',query:{id:1}})的形式进行路由跳转与传参

使用：在跳转到的组件中获取ID：this.props.location.query.id

//父组件
return (
    <div>
        <Link to="/">首页</Link>
        <div onClick={ ()=>{
            this.props.history.push({
                pathname:'/user',
                query:{
                    id:1
                }
            })
        } } >用户中心</div>
    <div>
    <Switch>
        <Route exact path="/" component={Tools} />
        <Route exact path="/user" component={User} />
    </Switch>
)
//子组件
return (
    <div>
        <h1>欢迎：{this.props.location.query.id}</h1>
    <div>
)

state传参

在Link上做文章，to传入一个对象，对象中一个属性为pathname，另一个属性为state对象，state对象中保存所传参数(<Link to={ { pathname:'/user' , state:{ id:1 } } }></Link>)

使用：在跳转到的组件中获取ID：this.props.location.state.id

//父组件
return (
    <div>
        <Link to="/">首页</Link>
        <Link to={ {
            pathname:'/user',
            state:{
                id:1
            }
        } } >用户中心</Link>
    <div>
    <Switch>
        <Route exact path="/" component={Tools} />
        <Route exact path="/user/" component={User} />
    </Switch>
)
//子组件
return (
    <div>
        <h1>欢迎：{this.props.location.state.id}</h1>
    <div>
)

React从0开始：React Router(一)

1.Route、Link以及Switch的使用

2. 路由的传参

1.`Route`、`Link`以及`Switch`的使用