1.开发环境 react
2.电脑系统 windows10专业版
3.在使用react开发的过程中,我们发现react官网没有路由,然后去网上搜索,给出了两个常用的react-router和react-router-dom,下面我来分享一下。
4.react-router和react-router-dom有什么区别?
相信很多小伙伴们刚开始的都会和我一样,在使用react来创建路由的时候,写的是:
import *** from 'react-router';
然后百度了很多博客,发现是:
import *** from 'react-router-dom';
4-1.那么react-router和react-router-dom有什么关系呢?
react-router:提供了router的核心api,如Router/Route/Switch等,但没有提供有关dom操作进行路由跳转api;
react-router-dom:提供了BrowserRouter/Route/Link等api,可以通过dom操作触发事件控制路由
那么我们要怎么用呢?
首先,react-router-dom里包含了react-router的依赖,因此我们在安装的时候只需要安装后者即可。
npm i react-router-dom -S
4-2.基础使用
//引入react jsx写法的必须
import React from 'react';
//引入需要用到的页面组件
import Home from './pages/home';
import About from './pages/about';
//引入一些模块
import { BrowserRouter as Router, Route} from "react-router-dom";
function router(){
return (
);
}
export default router;
//home.js
import React, { Component } from 'react';
export default class Home extends Component {
render() {
return (
欢迎,这里是Home
)
}
}
//about.js
import React, { Component } from 'react';
export default class About extends Component {
render() {
return (
欢迎,这里是About
)
}
}
//在app.js中引入
import Router from './Router'
class App extends React.Component {
render(){
return (
);
}
}
5.重定向
//router.js
//需要import一下Redirect
import {Redirect} from "react-router-dom";
return (
(
)}>
);
}
export default router;
6.路由嵌套
import React from 'react';
import './App.css';
import './assets/font/iconfont.css'
import { BrowserRouter, Route,Switch,Redirect } from "react-router-dom"
import Home from './views/Home';
import TextView from './views/TextView';
import TextView from './views/Next';
class App extends React.Component{
render() {
return (
)
}
}
7.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。