react学习（二）——react-router

最新推荐文章于 2024-08-07 09:56:50 发布

原创最新推荐文章于 2024-08-07 09:56:50 发布 · 181 阅读

0 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了React框架中React-Router的使用方法，包括Link组件、BrowserRouter、Route和Switch组件的特性与应用。通过实例展示了如何配置路由，实现页面跳转及路由独占性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端react框架的路由 react-router

1.link组件

渲染后就是a标签，to属性为url路径，key属性必须有并且是唯一的，不然会报错。

例：

import {Link} from "react-router-dom" 
<Link to='./link' key='1'>link</Link>

2.BrowserRouter Route 和 Switch 组件

App.js

import React, {Component} from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom'
import './App.css';
import Routers from './router/router'
import 'antd/dist/antd.css'


class App extends Component {
    constructor(props) {
        super(props);
    }


    renderRouters(){
        let routers = [];

        routers.push(<Route exact  key={Routers.path} path={Routers.path} component={Routers.component} />);
        Routers.childRoutes.forEach(function (item) {
            routers.push( <Route key={item.path} path={item.path} component={item.component}/>);
        });
        return routers;
    }
    render() {
        const children = this.renderRouters();
        return (<BrowserRouter><Switch>
            {children}
        </Switch></BrowserRouter>);
    }
}

export default App;

router.js

import home from '../view/home'
import login from '../view/login'
import application from '../view/application'
import notFound from '../view/notFound'
import article from '../view/article'
import test from  '../view/test'

export default {
    path: '/',
    name: 'home',
    component: home,
    childRoutes: [
        {path: '/login', component: login},
        {path: '/info', component: application},
        {path: '/home', component: home},
        {path: '/article', component: article},
        {path:'/test',component:test},
        {path: '*', component: notFound}
    ]
}

Router组件为单个路由，里面的属性值有key：url路径（可选）， path:url路径（必须） component：组件（必须）

Switch组件是为了让路由组里面的路由不重复，只匹配第一个url所对应的渲染的路由。Switch是唯一的

BrowserRouter组件为路由跟节点，与之对应的还有HashRouter （暂时我的理解是hash多了一个#，只知道放在根部，具体等以后用多啦再说说这个组件），可以理解为Browser对应history路由，Hash对应hash路由，这个是唯一的

PS：有什么不对的希望看到的能指出了，刚学习这个可能很多都理解的不是很深刻。