React 路由

## 路由
参考地址：https://reacttraining.com/react-router/web/guides/quick-start
 

1.安装 路由   npm install react-router-dom --save

2.BrowserRouter和HashRouter区别
    1.表现形式不同：BrowserRouter：/  HashRouter：/#/     指的是具体浏览器访问 是 xxxx/login 还是 xxxx/#/login
    2.打包发布的时候，如果是BrowserRouter，我们需要后台做重定向处理，否则刷新访问会出现404

路由第一讲:基本示例 通过url直接访问地址，进行路由

目录结构

Home文件内容

import React from "react"

export default class Home extends React.Component {
    render() {
        return (
            <div>
                Home
            </div>
        )
    }
}

news文件内容 

import React from "react"

export default class News extends React.Component {
    render() {
        return (
            <div>
                News
            </div>
        )
    }
}

app.js

import React from 'react';

import { BrowserRouter as Router, Route } from 'react-router-dom'

import Home from './views/Home'
import News from './views/News'

class App extends React.Component {
  render() {
    return (
      <Router>
        <Route path="/home" component={Home}></Route>
        <Route path="/news" component={News}></Route>
      </Router>
    );
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

启动项目以后就可以根据具体的路径访问到具体的内容了

路由第二讲:通过Link的方式进行跳转

基于上面的文件目录再添加两个文件 

index.jsx

import React from 'react'
import "./style.css"
import { Link } from 'react-router-dom'
export default class Nav extends React.Component {
    render() {
        return (
            <div className="nav">
                <ul>
                    <li>
                        <Link to="/news">新闻</Link>
                    </li>
                    <li>
                        <Link to="/home">首页</Link>
                    </li>
                </ul>
            </div>

        )
    }
}

style.css

.nav ul{
    overflow: hidden;
    clear: both;
}

.nav ul li{
    float: left;
    margin: 0 20px;
}

.active{
    color:red;
}

修改Home.jsx和 News.jsx 引入文件

import React from "react"
import Nav from "../components/Nav"
export default class Home extends React.Component {
    render() {
        return (
            <div>
                <Nav />
                Home
            </div>
        )
    }
}

配置完成启动以后，在这两个页面的会展示两个按钮，可以跳转到不同的页面