React06---路由router | 易学教程

一、react-router的组件
1.路由器组件：<BrowserRouter> 、<HashRouter>
2.路由：<Route>
3.重定向:<Redirect>
4.路由连接: <Link>
5.导航路由连接:<NavLink>
6.交换路由:<Switch> 里面可以包换多个<Route>

二、路由组件和非路由组件
拆分组件的时候会把路由组件（views）和非路由组件分开写，写在不同的文件夹里。
路由组件：就是对应一个路由地址的组件。
非路由组件：就是普通的组件。

三、路由结构
一级路由、二级路由、三级路由

四、源代码
一级路由
app.jsx:

import React,{Component} from 'react'
import {Swithch,Route,Redirect, NavLink, Switch} from 'react-router-dom'
import Home from '../views/home'
import About from '../views/about'
export default class App extends Component{
    render(){
        return(
            <div>
                <div><h1>Router</h1></div>
                <div>
                    <NavLink to='/about'>About</NavLink>
                    <NavLink to='/home'>Home</NavLink>
                </div>
                <div>
                    <Switch>
                        <Route path='/about' component={About}></Route>
                        <Route path='/home' component={Home}></Route>
                        <Redirect path='/about' component={About}></Redirect>
                    </Switch>

                </div>
            </div>

        )
    }
}

二级路由
home.jsx:

import React,{Component} from 'react'
import { NavLink, Switch, Route, Redirect } from 'react-router-dom'
import Page from './page'
import Take from './take'
export default class Home extends Component{
    render(){
        return(
            <div>
                <div>content:Home</div>
                <div>
                    <NavLink to='/home/page'>Page</NavLink>
                    <NavLink to='/home/take'>Take</NavLink>
                </div>
                <div>
                    <Switch>
                        <Route path='/home/page' component={Page}></Route>
                        <Route path='/home/take' component={Take}></Route>
                        <Redirect path='/home/page' component={Page}></Redirect>
                    </Switch>
                </div>
            </div>

        )
    }
}

about.jsx:

import React,{Component} from 'react'
export default class About extends Component{
    render(){
        return(
            <div>content:About</div>
        )
    }
}

page.jsx:

import React,{Component} from 'react'
export default class Page extends Component{
    render(){
        return(
            <div>content:Page</div>
        )
    }
}

take.jsx:

import React,{Component} from 'react'
export default class Take extends Component{
    render(){
        return(
            <div>content:Take</div>
        )
    }
}

来源：CSDN

作者：Lion Of WU

链接：https://blog.csdn.net/NDSoumig/article/details/103754210

标签

react

路由