React之路由的基本操作

Posted Icy Hunter

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React之路由的基本操作相关的知识，希望对你有一定的参考价值。

文章目录

路由的基本使用

1.明确好界面中的导航区、展示区
2.导航区的a标签改为Link标签
					<Link to="/xxxxx">Demo</Link>
3.展示区写Route标签进行路径的匹配
					<Route path='/xxxx' component=Demo/>
4.<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>

路由组件与一般组件

1.写法不同：
			一般组件：<Demo/>
			路由组件：<Route path="/demo" component=Demo/>
2.存放位置不同：
			一般组件：components
			路由组件：pages
3.接收到的props不同：
			一般组件：写组件标签时传递了什么，就能收到什么
			路由组件：接收到三个固定的属性
								history:
											go: ƒ go(n)
											goBack: ƒ goBack()
											goForward: ƒ goForward()
											push: ƒ push(path, state)
											replace: ƒ replace(path, state)
								location:
											pathname: "/about"
											search: ""
											state: undefined
								match:
											params: 
											path: "/about"
											url: "/about"

NavLink与封装NavLink

1.NavLink可以实现路由链接的高亮，通过activeClassName指定样式名

Switch的使用

1.通常情况下，path和component是一一对应的关系。
2.Switch可以提高路由匹配效率(单一匹配)。

解决多级路径刷新页面样式丢失的问题

1.public/index.html 中 引入样式时不写 ./ 写 / （常用）
2.public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用）
3.使用HashRouter

路由的严格匹配与模糊匹配

1.默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
2.开启严格匹配：<Route exact=true path="/about" component=About/>
3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

Redirect的使用

1.一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由
2.具体编码：
		<Switch>
			<Route path="/about" component=About/>
			<Route path="/home" component=Home/>
			<Redirect to="/about"/>
		</Switch>

嵌套路由

1.注册子路由时要写上父路由的path值
2.路由的匹配是按照注册路由的顺序进行的

实例

下面将通过一个实例一一分析上述用法。

文件目录

public


bootstrap.css自己下载即可
.ico是图标，可有可无

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <link rel="stylesheet" href="/css/bootstrap.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .atguigu
            opacity:0.5;
        
    </style>
</head>
<body>
    <div id="root"></div>
</body>
</html>

这里使用

<link rel="stylesheet" href="/css/bootstrap.css">

而不是

<link rel="stylesheet" href="./css/bootstrap.css">

能够防止样式在多路由的丢失
atguigu的样式则是为了展现NavLink中的activeClassName属性准备的，点击会使得按钮的透明度发生变化。

src

index.jsx:

//引入react核心库
import React from 'react'
//引入ReactDOM
import ReactDOM from 'react-dom'
//
import BrowserRouter from 'react-router-dom'
//引入App
import App from './App'

ReactDOM.render(
	<BrowserRouter>
		<App/>
	</BrowserRouter>,
	document.getElementById('root')
)

入口文件，直接包着BrowserRouter，方便配置路由。因为在同一个一个路由器中才能进行路由匹配

App.jsx:

import React,  Component  from 'react'
import Route,Switch,Redirect from 'react-router-dom'
import Home from './pages/Home' //Home是路由组件
import About from './pages/About' //About是路由组件
import Header from './components/Header' //Header是一般组件
import MyNavLink from './components/MyNavLink'
import Show from './pages/Show'

export default class App extends Component 
	render() 
		return (
			<div>
				<div className="row">
					<div className="col-xs-offset-2 col-xs-8">
						<Header/>
					</div>
				</div>
				<div className="row">
					<div className="col-xs-2 col-xs-offset-2">
						<div className="list-group">

							/* 原生html中，靠<a>跳转不同的页面 */
							/* <a className="list-group-item" href="./about.html">About</a>
							<a className="list-group-item active" href="./home.html">Home</a> */

							/* 在React中靠路由链接实现切换组件--编写路由链接 */
							<MyNavLink to="/about">About</MyNavLink>
							<MyNavLink to="/home">Home</MyNavLink>
							<MyNavLink to="/show/hunter">Show</MyNavLink>
						</div>
					</div>
					<div className="col-xs-6">
						<div className="panel">
							<div className="panel-body">
								/* 注册路由 */
								<Switch>
									<Route path="/about" component=About/>
									<Route path="/home" component=Home/>
									<Route path="/show" component=Show/>
									<Redirect to="/about"/>
								</Switch>
							</div>
						</div>
					</div>
				</div>
			</div>
		)

App组件的内容。
点击About按钮，展示对应About组件
点击Home按钮，展示对应Home组件
点击Show按钮，展示对应Show组件，值得注意这里Show按钮to中的路由多了一截，因为是模糊匹配，因此当匹配到show时就可以认为匹配成功

<Redirect to="/about"/>

当按钮没有指定任何路由时，会自动重定向展示about组件

<Switch>

嵌套此标签则表示，匹配路由当匹配到之后便不再往下匹配，提高效率。

components

用于存放通用的组件

Header/index.jsx:
import React,  Component  from 'react'

export default class Header extends Component 
	render() 
		// console.log('Header组件收到的props是',this.props);
		return (
			<div className="page-header"><h2>React Router Demo</h2></div>
		)

标题组件（一直存在）

MyNavLink/index.jsx:
import React,  Component  from 'react'
import NavLink from 'react-router-dom'

export default class MyNavLink extends Component 
	render() 
		// console.log(this.props);
		return (
			<NavLink activeClassName="atguigu" className="list-group-item" ...this.props/>
		)

用于存放能够进行路由跳转的组件，…this.props则是将传来的参数全都展开，activeClassName属性用于当此组件被点击会被赋予特定样式，to是跳转的路由，此组件中的chilren属性就是组件中展现的文字。

pages

用于存放设置好路由，点击按钮，才会展现的组件

About/index.jsx:
import React,  Component  from 'react'

export default class About extends Component 
	render() 
		// console.log('About组件收到的props是',this.props);
		return (
			<h3>我是About的内容</h3>
		)

用于展示点击about按钮后的组件。

Home/ndex.js:
import React,  Component  from 'react'
import MyNavLink from '../../components/MyNavLink'
import Route,Switch,Redirect from 'react-router-dom'
import News from './News'
import Message from './Message'

export default class Home extends Component 
	render() 
		return (
				<div>
					<h3>我是Home的内容</h3>
					<div>
						<ul className="nav nav-tabs">
							<li>
								<MyNavLink to="/home/news">News</MyNavLink>
							</li>
							<li>
								<MyNavLink to="/home/message">Message</MyNavLink>
							</li>
						</ul>
						/* 注册路由 */
						<Switch>
							<Route path="/home/news" component=News/>
							<Route path="/home/message" component=Message/>
							<Redirect to="/home/news"/>
						</Switch>
					</div>
				</div>
			)

Home组件。
Home组件中还有两个按钮分别是News和Message，点击按钮需要展示对应的子组件，这里可以配置多级路由，前提是子路由需要前一级和父路由匹配。

Home/Message/index.jsx:
import React,  Component  from 'react'

export default class Message extends Component 
	render() 
		return (
			<div>
				<ul>
					<li>
						<a href="/message1">message001</a>&nbsp;&nbsp;
					</li>
					<li>
						<a href="/message2">message002</a>&nbsp;&nbsp;
					</li>
					<li>
						<a href="/message/3">message003</a>&nbsp;&nbsp;
					</li>
				</ul>
			</div>
		)

Home组件中需要展示的message组件。
可以发现其中的message按钮的路由并不存在，因此到时候会重定向到about中

Home/News/index.jsx:
import React,  Component  from 'react'

export default class News extends Component 
	render() 
		return (
			<ul>
				<li>news001</li>
				<li>news002</li>
				<li>news003</li>
			</ul>
		)

Home组件中展示的News组件

运行

需要安装react-router-dom
因为这是5的实例
因此

yarn add react-router-dom@5

然后运行

npm start

打开网页

点击Show

发现可以匹配，证明模糊路由
Show按钮变淡，说明NavLink那个属性设置成功
点击Home

Home组件中的组件内容也展示成功。
点击Message

说明多级路由配置成功。
点击Message001

跳转到About组件内容
说明路由无法匹配到发生重定向成功。

以上是关于React之路由的基本操作的主要内容，如果未能解决你的问题，请参考以下文章

React12.路由

使用react-router-dom@6,如何完成路由守卫这样的功能——使用高阶组件的包裹。

使用react-router-dom@6,如何完成路由守卫这样的功能——使用高阶组件的包裹。

react路由组件&&非路由组件

细说React

react函数式组件（非路由组件）实现路由跳转