react--基础路由

react 基础路由

首先需要安装路由插件：

	npm i react-router-dom   

然后在App.js中导入：

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

写两个组件:

Home组件：

import React, { Component } from 'react'

export default class Home extends Component {
    render() {
        return (
            <div>
                首页
            </div>
        )
    }
}

List组件：

import React, { Component } from 'react'

export default class List extends Component {
    render() {
        return (
            <div>
                列表
            </div>
        )
    }
}

在App.js中导入组件：

<div className="App">
	<Router>
		<Link to="/">首页</Link>
		<Link to="list">列表</Link>
		<Switch>
			<Route path="/" component={Home} exact />
			<Route path="/" component={List} />
		</Switch>
	</Router>
</div>

BrowserRouter/HashRuter 路由模式
Switch 表示当前路由切换时只匹配一个就好
Route 表示每一个路由对象
Link 生成一个a标签用来做页面跳转
NavLink 生成一个带样式的a标签
exact 表示绝对匹配

来源：CSDN

作者：sqxka

链接：https://blog.csdn.net/weixin_46390620/article/details/104484153