前端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:有什么不对的希望看到的能指出了,刚学习这个可能很多都理解的不是很深刻。