React中的路由

安装：

npm i react-router-dom@5.3.4

前端路由的功能：让用户从一个视图导航到另一个视图。

前端路由是一套映射规则，是URL路径与组件的对应关系。

使用React路由实际就是配置路径和组件。

1.在router文件下定义路由

// 和vue不同之处，这是一个组件，类组件，函数组件都可以
import React, { Component } from 'react'
// 引入Switch组件，Route
import {Switch,Route,Redirect} from "react-router-dom";
// 引入要显示的组件
import ComAFn from '../ComAFn';
import ComBClass from "../ComBClass"
import Not from '../Not';
import FirstPage from '../FirstPage';
export default class router extends Component {
  render() {
    return (
      <div>
        <Switch> 
          {/* 匹配的方式，url中是否包含组件的path，如果包含就认为匹配成功，显示当前组件，不在向后匹配，所以path="/"页面不会随着路由切换更改，此时加上exact精准匹配就可以了 */}
          <Route path="/" exact component={FirstPage}>Route> 
          <Route path="/afn" component={ComAFn}>Route>
          <Route path="/class" component={ComBClass}>Route>  
          <Route path="/404" component={Not}>Route>
          {/* 对路由重定向 */}
         <Redirect to="/404">Redirect>
        Switch>
      div>
    )
  }
}

2.在index.js文件定义路由模式

// 导入哈希模式 或者BrowserRouter history模式
// import { HashRouter } from 'react-router-dom';
import { BrowserRouter as Router } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Router>
      <App />
  Router>
  
 
);

3.在App.js文件导出以及withRouter解决非路由组件无法跳转问题。

// import logo from './logo.svg';
import './App.css';
// 引入组件
 
import {Link,withRouter} from "react-router-dom";
import Router from './components/router/router';
import React, { Component } from 'react'
 
 class App extends Component {
  constructor(){
    super()
 
  }
  jump(url){
    this.props.history.push(url)
  }
  render() {
    return (
      <div>
        <Router>Router>
        {/* 声明式导航 */}
        <Link to="/afn" >去afnLink><br>br>
          <Link to="/class" >去classLink>
 
          {/* <NavLink exact activeClassName="active" to="/afn" >去afnNavLink><br>br>
          <NavLink exact activeClassName="active" to="/class" >去classNavLink> */}
 
          {/* 编程式导航 */}
          <button onClick={()=>this.jump("/afn")}>afnbutton>
          <button onClick={()=>this.jump("/class")}>classbutton>
      div>
    )
  }
  
}
// App根组件中非Route包括的是非路由组件，无法跳转且会报错，可以通过withRouter来解决
//  给非路由组件增加属性和方法
// eslint-disable-next-line no-undef
const App1=withRouter(App)
export default App1