关于react.js:react配置路由

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.js
import React, {Component} from 'react';

export default class Home extends Component {render() {
    return (<h1>
      欢送, 这里是 Home
    </h1>)
  }
}

//about.js
import 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 一下 Redirect
import {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. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。