Yuan Blog

Appearance

ReactRouter 配置 ​

首先安装 react 和 react-router-dom。

  • 路由配置
//AppRouter

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

function Index() {
    return (
        <h2>首页</h2>
    )
}

function List() {
    return (
        <h2>列表页</h2>
    )
}

function AppRouter() {
    return (
        <Router>
            <ul>
                <li>
                    <Link to="/">首页</Link>
                </li>
                <li>
                    <Link to='/list/'>列表</Link>
                </li>
            </ul>
            <Route path="/" exact component={Index} />
            <Route path="/list/" component={List} />
        </Router>
    )
}

export default AppRouter;
//AppRouter

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

function Index() {
    return (
        <h2>首页</h2>
    )
}

function List() {
    return (
        <h2>列表页</h2>
    )
}

function AppRouter() {
    return (
        <Router>
            <ul>
                <li>
                    <Link to="/">首页</Link>
                </li>
                <li>
                    <Link to='/list/'>列表</Link>
                </li>
            </ul>
            <Route path="/" exact component={Index} />
            <Route path="/list/" component={List} />
        </Router>
    )
}

export default AppRouter;

exact：表示精确匹配。

ReactRouter 拆分 ​

模拟真实项目，每个菜单是一个单独的路由文件。

//AppRouter
    import React from 'react'
    import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

    import Index from './pages/index'
    import List from './pages/list'

    function AppRouter() {
        return (
            <Router>
                <ul>
                    <li>
                        <Link to="/">首页</Link>
                    </li>
                    <li>
                        <Link to='/list/'>列表</Link>
                    </li>
                </ul>
                <Route path="/" exact component={Index} />
                <Route path="/list/" component={List} />
            </Router>
        )
    }

    export default AppRouter
//AppRouter
    import React from 'react'
    import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

    import Index from './pages/index'
    import List from './pages/list'

    function AppRouter() {
        return (
            <Router>
                <ul>
                    <li>
                        <Link to="/">首页</Link>
                    </li>
                    <li>
                        <Link to='/list/'>列表</Link>
                    </li>
                </ul>
                <Route path="/" exact component={Index} />
                <Route path="/list/" component={List} />
            </Router>
        )
    }

    export default AppRouter

ReactRouter 接收路由参数 ​

设置路由动态传值规则：

  • 第一步：传递值

  • 第二步：接收值

  • 第三步：显示内容

在 list 路由配置路由参数：

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

    import Index from './pages/index'
    import List from './list/index'

    function AppRouter() {
        return (
            <Router>
                <ul>
                    <li>
                        <Link to="/">首页</Link>
                    </li>
                    <li>
                        <Link to='/list/'>列表</Link>
                    </li>
                </ul>
                <Route path="/" exact component={Index} />
                {/* 设置路由参数 */}
                <Route path="/list/:id" component={List} />
            </Router>
        )
    }

    export default AppRouter
import React from 'react'
    import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

    import Index from './pages/index'
    import List from './list/index'

    function AppRouter() {
        return (
            <Router>
                <ul>
                    <li>
                        <Link to="/">首页</Link>
                    </li>
                    <li>
                        <Link to='/list/'>列表</Link>
                    </li>
                </ul>
                <Route path="/" exact component={Index} />
                {/* 设置路由参数 */}
                <Route path="/list/:id" component={List} />
            </Router>
        )
    }

    export default AppRouter

子组件 List 接收路由参数：

import React, {Component} from 'react';
    import {Link} from 'react-router-dom'


    class List extends Component {
        constructor(props) {
            super(props)
            this.state = {}
        }
        render() { 
            return ( 
                <h2>页面分离-列表页 ---url传递的值是： {this.state.id}</h2>
             );
        }
        componentDidMount() {
            console.log(this.props)
            let id = this.props.match.params.id
            this.setState({id: id})
        }
    }

    export default List;
import React, {Component} from 'react';
    import {Link} from 'react-router-dom'


    class List extends Component {
        constructor(props) {
            super(props)
            this.state = {}
        }
        render() { 
            return ( 
                <h2>页面分离-列表页 ---url传递的值是： {this.state.id}</h2>
             );
        }
        componentDidMount() {
            console.log(this.props)
            let id = this.props.match.params.id
            this.setState({id: id})
        }
    }

    export default List;

ReactRouter 动态传值和重定向 ​

在 react 中路由重定向有两种方式，一种是标签式，一种是编程式。

配置列表详情界面组件，并将该组件添加到 AppRouter.js 文件中。

import React from 'react'

    function ListDetail() {
     return {
         <h2>详情页</h2>
     }
    }

    export default ListDetail;
import React from 'react'

    function ListDetail() {
     return {
         <h2>详情页</h2>
     }
    }

    export default ListDetail;
  • 设置路由动态传值
import React, {Component} from 'react';
    import {Link} from 'react-router-dom'

    class List Component{
        constructor(props) {
            super(props)
            this.state = {
                list: [
                    {cid: 126, title: '个人博客1'},
                    {cid: 666, title: '个人博客2'}
                ]
            }
        }
        render() { 
            return ( 
                <>
                    <h2>页面分离-列表页</h2>
                    <ul>
                        <li>url动态传值</li>
                        {
                            this.state.list.map((item, index) => {
                                return (
                                    <li key={index}>
                                        <Link to={'/Listdetail/'+item.cid}>{item.title}</Link> 
                                    </li>
                                )
                            })
                        }
                    </ul>
                </>
             );
        }
    }

    export default List
import React, {Component} from 'react';
    import {Link} from 'react-router-dom'

    class List Component{
        constructor(props) {
            super(props)
            this.state = {
                list: [
                    {cid: 126, title: '个人博客1'},
                    {cid: 666, title: '个人博客2'}
                ]
            }
        }
        render() { 
            return ( 
                <>
                    <h2>页面分离-列表页</h2>
                    <ul>
                        <li>url动态传值</li>
                        {
                            this.state.list.map((item, index) => {
                                return (
                                    <li key={index}>
                                        <Link to={'/Listdetail/'+item.cid}>{item.title}</Link> 
                                    </li>
                                )
                            })
                        }
                    </ul>
                </>
             );
        }
    }

    export default List

配置重定向界面 home.js 文件，并将该组件添加到 AppRouter.js 文件中。

import React from 'react'

    function Home() {
        return (
            <h2>重定向界面</h2>
        )
    }

    export default Home;
import React from 'react'

    function Home() {
        return (
            <h2>重定向界面</h2>
        )
    }

    export default Home;
  • 标签式设置重定向
import React, {Component} from 'react';
    import {Link, Redirect} from 'react-router-dom'

    class List Component{
        constructor(props) {
            super(props)
            this.state = {
                list: [
                    {cid: 126, title: '个人博客1'},
                    {cid: 666, title: '个人博客2'}
                ]
            }
        }
        render() { 
            return ( 
                <>
                    {/* 标签式 Redirect 重定向路径  */}
                    <Redirect to="/home/" />

                    <h2>页面分离-列表页</h2>
                    <ul>
                        <li>url动态传值</li>
                        {
                            this.state.list.map((item, index) => {
                                return (
                                    <li key={index}>
                                        <Link to={'/Listdetail/'+item.cid}>{item.title}</Link> 
                                    </li>
                                )
                            })
                        }
                    </ul>
                </>
             );
        }
    }

    export default List
import React, {Component} from 'react';
    import {Link, Redirect} from 'react-router-dom'

    class List Component{
        constructor(props) {
            super(props)
            this.state = {
                list: [
                    {cid: 126, title: '个人博客1'},
                    {cid: 666, title: '个人博客2'}
                ]
            }
        }
        render() { 
            return ( 
                <>
                    {/* 标签式 Redirect 重定向路径  */}
                    <Redirect to="/home/" />

                    <h2>页面分离-列表页</h2>
                    <ul>
                        <li>url动态传值</li>
                        {
                            this.state.list.map((item, index) => {
                                return (
                                    <li key={index}>
                                        <Link to={'/Listdetail/'+item.cid}>{item.title}</Link> 
                                    </li>
                                )
                            })
                        }
                    </ul>
                </>
             );
        }
    }

    export default List
  • 编程式设置重定向
import React, {Component} from 'react';
    import {Link, Redirect} from 'react-router-dom'

    class List Component{
        constructor(props) {
            super(props)
            this.state = {
                list: [
                    {cid: 126, title: '个人博客1'},
                    {cid: 666, title: '个人博客2'}
                ]
            }

            //编程式重定向
            this.props.history.push('/home/')
        }
        render() { 
            return ( 
                <>
                    <h2>页面分离-列表页</h2>
                    <ul>
                        <li>url动态传值</li>
                        {
                            this.state.list.map((item, index) => {
                                return (
                                    <li key={index}>
                                        <Link to={'/Listdetail/'+item.cid}>{item.title}</Link> 
                                    </li>
                                )
                            })
                        }
                    </ul>
                </>
             );
        }
    }

    export default List
import React, {Component} from 'react';
    import {Link, Redirect} from 'react-router-dom'

    class List Component{
        constructor(props) {
            super(props)
            this.state = {
                list: [
                    {cid: 126, title: '个人博客1'},
                    {cid: 666, title: '个人博客2'}
                ]
            }

            //编程式重定向
            this.props.history.push('/home/')
        }
        render() { 
            return ( 
                <>
                    <h2>页面分离-列表页</h2>
                    <ul>
                        <li>url动态传值</li>
                        {
                            this.state.list.map((item, index) => {
                                return (
                                    <li key={index}>
                                        <Link to={'/Listdetail/'+item.cid}>{item.title}</Link> 
                                    </li>
                                )
                            })
                        }
                    </ul>
                </>
             );
        }
    }

    export default List

ReactRouter 路由嵌套 ​

模拟真实项目选择左侧列表内容，呈现出该列表相关内容信息。

配置 AppRouter.js 路由文件

import React from 'react'
    import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
    import List from './pages/list'

    function AppRouter() {
        return (
            <Router>
                <ul>
                    <li>
                        <Link to="/">首页</Link>
                    </li>
                    <li>
                        <Link to="/list">列表</Link>
                    </li>
                </ul>
                <Route path="/" exact />
                <Route path="/list" component={List} />
            </Router>
        )
    }

    export default AppRouter
import React from 'react'
    import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
    import List from './pages/list'

    function AppRouter() {
        return (
            <Router>
                <ul>
                    <li>
                        <Link to="/">首页</Link>
                    </li>
                    <li>
                        <Link to="/list">列表</Link>
                    </li>
                </ul>
                <Route path="/" exact />
                <Route path="/list" component={List} />
            </Router>
        )
    }

    export default AppRouter

配置 List 组件并布局样式

import React, { Component } from 'react'
    import './index.css'

    class List Component {
        constructor(props) {
            super(props)
            this.state ={
                routerConfig: [
                    {id: 1, title: '视频页面', path: '/video/', exact: false, component: Video}
                ]
            }
        }
        return (
            <>
                <h2>列表页</h2>
                <div className="box">
                    <div className="left">
                        <ul>
                            {
                                this.state.routerConfig.map((item, index) => {
                                    return(
                                        <li key={item.id}>
                                            <Link to={item.path}>{item.title}</Link>
                                        </li>
                                    )
                                })
                            }
                        </ul>
                    </div>
                    <div className="right">
                        点击右侧列表呈现相关内容
                        {
                            this.state.routerConfig.map((item, index) => {
                                return(<Route path={item.path} component={item.component} />)
                            })
                        }
                    </div>
                </div>
            </div>
        )
    }

export default List
import React, { Component } from 'react'
    import './index.css'

    class List Component {
        constructor(props) {
            super(props)
            this.state ={
                routerConfig: [
                    {id: 1, title: '视频页面', path: '/video/', exact: false, component: Video}
                ]
            }
        }
        return (
            <>
                <h2>列表页</h2>
                <div className="box">
                    <div className="left">
                        <ul>
                            {
                                this.state.routerConfig.map((item, index) => {
                                    return(
                                        <li key={item.id}>
                                            <Link to={item.path}>{item.title}</Link>
                                        </li>
                                    )
                                })
                            }
                        </ul>
                    </div>
                    <div className="right">
                        点击右侧列表呈现相关内容
                        {
                            this.state.routerConfig.map((item, index) => {
                                return(<Route path={item.path} component={item.component} />)
                            })
                        }
                    </div>
                </div>
            </div>
        )
    }

export default List

布局样式

...

    .box{ display: flex }
    .left{ width:120px;}
    .right{ flex:1 }
...

    .box{ display: flex }
    .left{ width:120px;}
    .right{ flex:1 }

配置 Video 组件内容

import React from 'react';
    import { Route, Link} from 'react-router-dom'
    import Vue from './vue'

    function Video() {
        return ( 
            <>
                <h2>
                    video页面
                </h2>
                <ul>
                    <li>
                        <Link to="/video/Vue/">Vue教程</Link>
                    </li>
                </ul>
                <div>
                    <Route path="/video/vue" component={Vue} />
                </div>
            </>
        );
    }
    
    export default Video;
import React from 'react';
    import { Route, Link} from 'react-router-dom'
    import Vue from './vue'

    function Video() {
        return ( 
            <>
                <h2>
                    video页面
                </h2>
                <ul>
                    <li>
                        <Link to="/video/Vue/">Vue教程</Link>
                    </li>
                </ul>
                <div>
                    <Route path="/video/vue" component={Vue} />
                </div>
            </>
        );
    }
    
    export default Video;

配置 Vue 组件内容

import React from 'react'

    function Vue() {
        return (
            <h2>Vue教程开始啦~</h2>
        )
    }

    export default Vue;
import React from 'react'

    function Vue() {
        return (
            <h2>Vue教程开始啦~</h2>
        )
    }

    export default Vue;