react-route

首先，我们来说一下react路由是做什么的呢？
我们经常会看到类似于微信下面的tab切换吧！像这种效果在react中就可以用路由实现。
在webpack搭建的环境中,我们需要用命令安装路由
Installation | 安装

npm install react-route-dom

路由的核心代码：

<Router>
    <div>
        <div>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/topics" component={Topics} />
        </div>
        <ul>
            <li><Link to="/">主页</Link></li>
            <li><Link to="/about">关于<Link></li>
            <li><Link to="/topics">主题列表<Link></li>
        </ul>
    </div>
</Router>

我解释一下上面的有些标签的作用：

<Link>

为您的应用提供声明式的、无障碍的导航。

import { Link } from "react-route-dom";
<Link to="/about"></Link>

to: string
需要跳转的路径（pathname）或者地址（location）

<Link to="courses" />

to: object
需要跳转到的地址

<Link to={{
    pathname: '/courses',
    search: '?sort=name',
    hash: '#the-hash',
    state: { fromDashBorder: true }
}} />

replace: bool
当设置为true时，点击链接时后将使用新地址替换掉历史记录中的旧地址。
当值为false时，点击链接时后会在原有访问历史记录基础上新增一条记录。
默认为false

<Link to="/courses" replace />

<NavLink>

是Link的一个特定版本，会在匹配上当前的URL的时候会给已经渲染的元素添加样式参数。

import { NavLink } form "react-router-dom";
<NavLink to="/about">About</NavLink>

activeClassName: string
当元素匹配到当前URL时，这个类会被赋予给这个元素。其默认值为active，这个类会被添加到className属性的后面（追加）。

<navLink to="about" activeClassName="selected">About</NavLink>

activeStyle: object
当此元素被选中时，为此元素添加样式。

<NavLink to="about" activeStyle={{ color: red }}></NavLink>

exact: bool
当值为true时，只有当地址完全匹配class和style时才会用。

---

全部的代码如下：
文件的主目录：

• react-route
  
  • src
    
    • Component
      
      • footer.js
      • about.js
      • home.js
      • topics.js
    • js
      
      • index.js
    • css
      
      • common.css
      • reset.css
  • index.html
  • package.json
  • webpack.config.js

这是文件的目录
Component中放的是组件。

import React,{ Component } from "react";
import { render } from "react-dom";
import { 
    BrowserRouter as Router,
    Route,
    Link,
} from "react-router-dom";
import Home from "./home";
import About from "./about";
import Topics from "./topics";
export default class BasicExample extends Component{
    render(){
        return(
            <Router>
                <div className="footer">
                    <div className="list_content">
                        <Route exact path="/" component={Home} />
                        <Route path="/about" component={About} />
                        <Route path="/topics" component={Topics} />
                    </div>
                    <ul className="list">
                        <li className="ul_li center"><Link to="/">主页</Link></li>
                        <li className="ul_li center"><Link to="/about">关于</Link></li>
                        <li className="ul_li center"><Link to="/topics">主题列表</Link></li>
                    </ul>
                </div>
            </Router>
        )
    }
}

index.js

//index.js
import "../css/reset.css";
import "../css/common.css";
import React,{ Component } from "react";
import { render } from "react-dom";

import Header from "../Components/header";
//import Content from "../Components/content";
import BasicExample from "../Components/footer";

class Main extends Component{
    render(){
        return (
            <div className="container">
                <Header />

                <BasicExample />
            </div>
        )
    }
}
render(
    <Main />,
    document.getElementById("root")
);