十react-router 4.x的基本配置

Posted 2020-11-22 chenxi188

路由的定义及作用

根组件根据客户端不同的请求网址显示时，要卸载上一个组件，再挂载下一个组件，如果手动操作话将是一个巨大麻烦。具体过程如下图：

【根组件】
    ↑
【首页组件】  【新闻组件】 【商品组件】

【react-router】可以让根组件动态的去挂载不同的其他组件。（根据用户访问的地址动态的加载不同的组件）

一、路由使用步骤

【官网文档入口】：https://github.com/ReactTraining/react-router

1.react路由的配置：

1、找到官方文档
https://reacttraining.com/react-router/web/example/basic

2、安装

cnpm install react-router-dom --save

3、找到项目的根组件引入react-router-dom

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

4、复制官网文档根组件里面的内容进行修改 （加载的组件要提前引入）
注：exact表示严格匹配，不加的话，点新闻时，还是会把首页也加载进来

<Router>
     <Link to="/">首页</Link>
      <Link to="/news">新闻</Link>
      <Link to="/product">商品</Link>

       <Route exact path="/" component={Home} />
       <Route path="/news" component={News} />    
       <Route path="/product" component={Product} />   
</Router>

二、路由的实例

【src/App.js】-- 路由配置都在此处

import React from 'react';
import './App.css';

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; //首先要引入路由模块
import Home from './components/Home';
import News from './components/News';
import Product from './components/Product';

function App() {
  return (
    <Router>
    <div>           
        <header className="title"> 
          <Link to="/">首页</Link> | 
          <Link to="/news">新闻</Link> | 
          <Link to="/product">商品</Link> | 
        </header>
        
         <br /><hr />

        <Route exact path="/" component={Home} />
        <Route path="/news" component={News} />    
        <Route path="/product" component={Product} />                 
    </div>
</Router>
  );
}
export default App;

【src/components/Home.js】

import React, { Component } from 'react';

class Home extends Component {
    constructor(props){
        super(props);
        this.state = {  };
    }
    render() {
        return (     
            <div>
                我是首页组件
            </div>
        );
    }
}
export default Home;

【src/components/News.js】

import React, { Component } from 'react';

class News extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        return (      
            <div>
                我是新闻组件
            </div>
        );
    }
}
export default News;

【src/components/Product.js】

import React, { Component } from 'react';

class Product extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        return (    
            <div>
                我是商品组件
            </div>
        );
    }
}
export default Product;

【效果】：点上面导航，下面内容自动切换（自动卸载前一个组件，加载新组件）