React——路由

目录：

下载对应的包
某个路由页面的文件结构
引入并使用
带参数的路由
跳转
重定向

1、下载对应的包

npm i react-router-dom

2、某个路由页面的文件结构（此为个人习惯，只供参考）

• pages —— 总文件夹
  • home —— home路由的总文件夹
    • components ——用于放置home的子组件
    • store —— home的数据管理
    • index.js —— home的总入口
    • styled.js —— home总入口的css文件

3、在 App.js 中引入并使用

1. path 是路由地址
2. exact 是只有路由地址与url完全匹配才显示，若不加，url包含path中的字符串就显示
3. component 是引入组件

import { BrowserRouter, Route } from 'react-router-dom'
import Home from './pages/home/index'

// 在 render 对应的地方引入
<BrowserRouter>
	<div>
		<Route path="/" exact component={Home}></Route>
    </div>
</BrowserRouter>

4、带参数的路由

一、反斜杆的方式

例如 detail 详情页要带上详情id
App.js 中的路由跳转
<Route path="/detail/:id" exact component={Detail}></Route>

跳转连接
<Link to={`/detail/${id}`}></Link>

• 详情页可以通过 this.props.match.params.id 拿到，然后传给后台拿对应数据

二、问号带参数的方式

例如 detail 详情页要带上详情id
App.js 中的路由跳转
<Route path="/detail" exact component={Detail}></Route>

跳转连接
<Link to={`/detail?id=${id}`}></Link>

• 详情页可以通过 this.props.match.location.search 拿到
• 但是拿到的数据是这样的：?id=1
• 需要进一步解析才能拿到最终结果，传给后台

5、跳转

一、标签跳转

import { Link } from 'react-router-dom'

<Link to="[所要跳转的路由地址]"></Link>

二、js跳转

render(){
	goToHome(){
		this.props.history.push('/')
	}
	
	return (
		<button onClick={this.goToHome.bind(this)}>去首页</button>
	)
}

6、重定向

import { Redirect } from 'react-router-dom'

<Redirect to='跳转地址' />

• 应用场景：进主页时，如果未登录，则重定向到登录页面，如果登录了，才能到主页

import { Redirect } from 'react-router-dom'

render(){
	// login表示是否登录，如果登录成功为true，否则为false
	if(login){
		return (
			主页的html
		)
	}else{
		<Redirect to='/login' />
	}
}