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 (<Router>    <Route path="/home" component={Home} />    <Route path="/about" component={About} /></Router>);}export default router;
//home.jsimport React, { Component } from 'react';export default class Home extends Component {  render() {    return (<h1>      欢送,这里是Home    </h1>)  }}
//about.jsimport React, { Component } from 'react';export default class About extends Component {  render() {    return (<h1>      欢送,这里是About    </h1>)  }}
//在app.js中引入import Router from './Router'class App extends React.Component {render(){return (  <Router />);}}

5.重定向

//router.js//须要import一下Redirectimport {Redirect} from "react-router-dom";return (<Router>    <Route path="/home" component={Home} />    <Route path="/" render={      ()=> (      <Redirect to="/home"/>)}>    </Route></Router>);}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 (        <BrowserRouter>            <Switch>                <Redirect exact from='/' to='/Home'></Redirect>                  <Home exact path='/Home'>                      <Redirect exact from='/Home' to="/Home/TextView" />                      <Route exact  path='/Home/TextView' component={TextView}></Route>                      <Route exact  path='/Home/Next' component={Next}></Route>                  </Home>                                </Switch>        </BrowserRouter>    )  }}

7.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。