React学习14----路由 react-router4.x的基本配置，根据路由跳转页面

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、复制官网文档根组件里面的内容进行修改 （加载的组件要提前引入）

 <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>

注意：exact表示严格匹配

具体例子如下：
项目结构：

App.js 中配置路由：

import React, {Component} from 'react';
import logo from './assets/images/logo.svg';
import './assets/css/App.css';
import Home from './components/Home';
import News from "./components/News";
import Product from "./components/Product";
import {BrowserRouter as Router, Route, Link} from "react-router-dom";

/**
 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、复制官网文档根组件里面的内容进行修改  （加载的组件要提前引入）

 <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>

 exact表示严格匹配

 */
class App extends Component {
    render() {
        return (
            <div>
                <Router>
                    <div>
                        {/* Link 组件实际上就是a连接*/}
                        <Link to="/">Home</Link><p/>
                        <Link to="/news">News</Link><p/>
                        <Link to="/product">Product</Link><p/>
                        <hr/>

                        {/*根据浏览器中的路由，挂载组件*/}
                        {/* 例如：http://localhost:3000/news 加载的就是News组件 */}
                        <Route exact path="/" component={Home}/>
                        <Route path="/news" component={News}/>
                        <Route path="/product" component={Product}/>
                    </div>
                </Router>
            </div>
        );
    }
}

export default App;

Home.js 中

import React from 'react';
class Home extends React.Component{
    constructor(props){
        super(props);
        this.state={
            title:'我是Home组件',
        }
    }

    render() {
        return(
            <div>{this.state.title}</div>
        );
    }
}

export default  Home;

News.js , Products.js 和Home.js 是一样的

最后看一下效果：

源码下载：
https://download.csdn.net/download/zhaihaohao1/10980372
rdemo14