小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
1.react-router
安装：
npm install react-router-dom
导入：
import { HashRouter, BrowserRouter as Router, //表示一个路由根容器，所有的路由相关的东西，都要包裹在HashRouter（BrowserRouter）里面， //而且，一个网站中，只需要使用一次HashRouter（BrowserRouter）,在HashRouter（BrowserRouter）中，只能有一个根元素 Switch, //有标签，则其中的在路径相同的情况下，只匹配第一个，这个可以避免重复匹配； //无标签，则其中的在路径相同的情况下全都会匹配。更严重的是，还会匹配上级路径的 Route, //Route表示一个路由规则，在Route上，有两个比较重要的属性，path,component 除了是规则 还是占位符 Link //表示一个路由的链接，类似于vue中的 }
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Switch,
HashRouter,
Route,
Link
} from "react-router-dom";
import Home from './component/home.jsx'
import mine from './component/mine.jsx'
import news from './component/set.jsx'
class App extends Component {
render() {
return <div>
<HashRouter>
<Link to='/home'>首页</Link>
<Link to='/mine'>我的</Link>
{/* 路由传参 */}
<Link to='/news/hot/01'>新闻</Link>
<div>
<Switch>
<Route path='/home' component={Home}></Route>
<Route path="/mine" component={mine}/>
{/* 路由传参 exact 精确匹配 在组件中使用props来接收参数 props.match.params */}
<Route path="/news/:type/:id" exact component={news}/>
<Route path="/news" exact component={news}/>
</Switch>
</div>
</HashRouter>
</div>
}
}
export default App;
二级路由：
import React, { Component } from 'react';
import { BrowserRouter as Router, Link, Route ,Switch } from 'react-router-dom'
import Details from './details'
class set extends Component {
render() {
return (
<div>
新闻组件
<Router>
<ul>
<li><Link to="/news/details/01">新闻一</Link></li>
<li><Link to="/news/details/02">新闻二</Link></li>
<li><Link to="/news/details/03">新闻三</Link></li>
<li><Link to="/news/details/04">新闻四</Link></li>
</ul>
<hr/>
<Switch>
//传参数给新闻详情组件，引出组件传值
<Route path="/news/details/:id" component={Details}/>
</Switch>
</Router>
</div>
);
}
}
export default set;
路由传参:
params:
<Route path='/path/:name' component={Path}/>
<link to="/path/2">xxx</Link>
this.props.history.push({pathname:"/path/" + name});
//读取参数用:this.props.match.params.name
query:
<Route path='/query' component={Query}/>
<Link to={{ pathname : ' /query' , query : { name : 'sunny' }}}>
this.props.history.push({pathname:"/query",query: { name : 'sunny' }});
//读取参数用: this.props.location.query.name
state:
<Route path='/sort ' component={Sort}/>
<Link to={{ path : ' /sort ' , state : { name : 'sunny' }}}>
this.props.history.push({pathname:"/sort ",state : { name : 'sunny' }});
//读取参数用: this.props.location.state.name
search:
<Route path='/web/departManange ' component={DepartManange}/>
<link to="web/departManange?tenantId=12121212">xxx</Link>
this.props.history.push({pathname:"/web/departManange?tenantId" + row.tenantId});
//读取参数用: this.props.location.search
