14 React路由的基本配置

React项目的可用的路由库是React-Router,当然这也是官方支持的。它也分为：

• react-router 核心组件
• react-router-dom 应用于浏览器端的路由库（单独使用包含了react-router的核心部分）
• react-router-native 应用于native端的路由

进行网站（将会运行在浏览器环境中）构建，我们应当安装react-router-dom。react-router-dom暴露出react-router中暴露的对象与方法，因此你只需要安装并引用react-router-dom即可。

一、总结

/*

react路由的配置：
  1.找到官方文档：https://reacttraining.com/react-router/core/guides/quick-start

  2.安装  cnpm install react-router-dom  --save

  3.找到项目的根组件引入 eact-router-dom

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

  4.复制官网文档根组件的内容进行修改（加载的组件提前引入）

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

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


    exact表示严格匹配


*/

二、代码

App.js

import React from "react";

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

import Home from "./components/Home.js";
import News from "./components/News.js";
import Product from "./components/Product.js";
import Header from "./components/Header.js";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <Router>
        <div className="App">
          <Header></Header>
          <br /> <br />
          <hr /> <br /> <br />
          <Route path="/" exact component={Home}></Route>
          <Route path="/news" component={News}></Route>
          <Route path="/product" component={Product}></Route>
        </div>
      </Router>
    );
  }
}

export default App;

Header.js

import React, { Component } from "react";

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

class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>
        <Link to="/">首页</Link>
        <Link to="/news">新闻</Link>
        <Link to="/product">商品</Link>
      </div>
    );
  }
}

export default Header;

Home.js

import React, { Component } from "react";


class Home extends Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>
        我是一个home组件的
      </div>
    );
  }
}

export default Home;

News.js

import React, { Component } from "react";


class News extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>
       
        我是一个news组件的内容 
      </div>
    );
  }
}

export default News;

Product.js

import React, { Component } from "react";

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

export default Product;