23.路由

官方链接：http://reacttraining.com/react-router/web

目录结构

  - src 
    - views
      - Article
        - index.js
      - Home
        - index.js
      - Users
        -index.js
      - index.js
    - App.js
    - index.js

初始化项目

src/App.js

import React, {Component} from 'react';

class App extends Component {
    render() {
        return (
            <div>
                你好
            </div>
        );
    }
}

export default App;

src/index.js

import React from 'react'
import {render} from 'react-dom'
import App from './App'
render(
    <App/>,
    document.getElementById("root")
)

src/views/Article/index.js

import React, {Component} from 'react';

class Article extends Component {
    render() {
        return (
            <div>
                文章
            </div>
        );
    }
}

export default Article;

src/views/Home/index.js

import React, {Component} from 'react';

class Index extends Component {
    render() {
        return (
            <div>
              首页
            </div>
        );
    }
}

export default Index;

src/components/Users/index.js

import React, {Component} from 'react';

class Users extends Component {
    render() {
        return (
            <div>
                用户
            </div>
        );
    }
}

export default Users;

src/views/index.js

export {default as Home} from './Home';
export {default as Article} from './Article'
export {default as Users} from './Users'

1.引用router src/index.js

//或者HasRouter as Router 带有哈希戳
import {BrowserRouter as Router} from 'react-router-dom';
//在外层使用Router进行嵌套，App下所有组件都可以使用Router下的组件
render(
    <Router>
        <App/>
    </Router>,
    document.getElementById("root")
)

2.搭建基础路由src/App.js

import {Route,Link} from 'react-router-dom';
import { Article,Home,Users} from './views'

render(){
  return(
    <div>
      <ul>
        <li><Link to='/home'>首页</Link></li>
        <li><Link to='/article'>文章</Link></li>
        <li><Link to='/users'>用户</Link></li>
      </ul>
      <Route component={Home} path="/home"/>
      <Route component={Article} path="/article"/>
      <Route component={Users} path="/users"/>
    </div>
  )
}

3.如果想要在访问 / 的时候显示/home的内容请做以下配置src/App.js

//NavLink 选中后自动给a标签添加className=active  (注：NavLink和Link选中一个就可以)
//Redirect 默认重定向页面 to=目标页面 from=来自于哪个路径做重定向
//Switch 在switch组件中只加载一个满足条件的组件
import {Route,NavLink as Link,Redirect,Switch} from 'react-router-dom';

    render() {
        return (
            <div>
                <ul>
                    <li><Link to="/home">首页</Link></li>
                    <li><Link to="/article">文章</Link></li>
                    <li><Link to="/users">用户</Link></li>
                </ul>
                <Switch>
                    <Route component={Home} path='/home'/>
                    <Route component={Article} path="/article"/>
                    <Route component={Users} path="/users"/>
                    {/*默认跳转首页 相当于switch中的default*/}
                    <Redirect to="/home" from="/" />
                </Switch>
            </div>
        );
    }

4.路由嵌套方式一：保留二级菜单
4.1.新建文件src/views/Article/ArticleDetail.js

import React, {Component} from 'react';

class ArticleDetail extends Component {
    render() {
        return (
            <div>
                文件详情 {this.props.match.params.id}
            </div>
        );
    }
}

export default ArticleDetail;

4.2.导入新组建src/views/Article/index.js

import {Link,Route} from 'react-router-dom';
import ArticleDetail from './ArticleDetail';

    render() {
        return (
            <div>
                <Link to='/article/1'>文章1</Link>
                <Link to='/article/2'>文章2</Link>
                {/*component 组建   path：访问路径   :id可以使用this.props.match.id进行获取值*/}
                <Route component={ArticleDetail} path='/article/:id'></Route>
            </div>
        );
    }

5.路由嵌套方式二：不保留二级菜单
5.1.src/App.js

    render() {
        return (
            <div>
                <ul>
                    <li><Link to="/home">首页</Link></li>
                    <li><Link to="/article">文章</Link></li>
                    <li><Link to="/users">用户</Link></li>
                </ul>
                <Switch>
                    <Route component={Home} path='/home'/>
                    {/*exact表示完全匹配，如果不加的话默认是不完全匹配path*/}
                    <Route component={Article} path="/article" exact/>   #update 修改  
                    <Route component={ArticleDetail} path="/article/:id"/>  #insert  新增
                    <Route component={Users} path="/users"/>
                    <Redirect to="/home" from="/"/>
                </Switch>
            </div>
        );
    }

5.2.src/views/Article/index.js

    render() {
        return (
            <div>
                <Link to='/article/1'>文章1</Link>
                <Link to='/article/2'>文章2</Link>
                {/*<Route component={ArticleDetail} path='/article/:id'></Route>*/} #delete 删除
            </div>
        );
    }