react-router可以让跟组件动态的去挂载不同的其它组件,根据用户访问的地址动态的加载不同的组件
一、react路由配置
1、找到react router官方文档
2、安装rect-router-dom
npm install react-router-dom —-save
3、找到项目的跟组件,引入rect-router-dom
import { BrowserRouter ,Link,Route } from "react-router-dom"
4、配置路由
exact
表示严格匹配
组件要提前引入
import './App.css';
import { BrowserRouter ,Link,Route } from "react-router-dom"
import About from './components/About'
import Home from './components/Home'
import New from './components/New'
function App() {
return (
<BrowserRouter>
<div>
<div className="header">
<Link className="link" to="/"> 首页</Link>
</div>
<div className="header">
<Link className="link" to="/New"> 新闻</Link>
</div>
<div className="header">
<Link className="link" to="/About"> 关于</Link>
</div>
<hr />
<Route exact path="/" component={Home}></Route>
<Route path="/new" component={New}></Route>
<Route path="/about" component={About}></Route>
</div>
</BrowserRouter>
);
}
export default App;
二、动态路由
5、一个页面跳转到另一个页面进行传值
(1)get传值
1 、获取 this.props.location.seach
(2)动态
<Link className="link" to={`/About/${item.id}`}> 关于</Link>
获取动态路由加载的组件里面获取传值 this.props.match
三、路由嵌套
在配置二级路由时,一级路由中的exact属性要删掉,否则二级路由无法访问,是个空白页
import React from "react"
import { Link,Route } from "react-router-dom"
import '../style.css'
import Info from './Home/Info' //直接在该文件中引用,不用在app.js中引入
import Main from './Home/Main'
export default function Home(){
return (
<div className="contentList">
<ul className="leftList">
<li className="list">
<Link className="link" to="/Home/"> 用户信息</Link>
</li>
<li className="list">
<Link className="link" to="/Home/Main"> 个人中心</Link>
</li>
</ul>
<div className="rightContent">
<Route exact path="/Home/" component={Info}></Route>
<Route path="/Home/Main" component={Main}></Route>
</div>
</div>
)
}
四、路由模块化
将路由抽离出来,放在一个数组中或单独放在router.js文件中,然后将routes暴露出来
import './index.css';
import { BrowserRouter ,Link,Route } from "react-router-dom"
import About from './components/About'
import Home from './components/Home'
import New from './components/New'
import NewsContent from './components/NewsContent'
function App() {
let routes = [
{
path:'/Home',
component:Home,
exact:true
},
{
path:'/New',
component:New
},
{
path:'/About',
component:About
}
]
return (
<BrowserRouter>
<div>
<div className="header">
<Link className="link" to="/Home"> 首页</Link>
</div>
<div className="header">
<Link className="link" to="/New"> 新闻</Link>
</div>
<div className="header">
<Link className="link" to="/About"> 关于</Link>
</div>
<hr style={{margin:0}}/>
{
routes.map((item , index) => {
// return <Route key={index} path={item.path} component={item.component}></Route>
if(item.exact){
return <Route exact key={index} path={item.path} component={item.component}></Route>
}else{
return <Route key={index} path={item.path} component={item.component}></Route>
}
})
}
</div>
</BrowserRouter>
);
}
export default App;
五、模块化路由嵌套
App.js文件
import './index.css';
import { BrowserRouter ,Link,Route, Router } from "react-router-dom"
import routes from './router'
function App() {
return (
<BrowserRouter>
<div>
<div className="header">
<Link className="link" to="/Home"> 首页</Link>
</div>
<div className="header">
<Link className="link" to="/New"> 新闻</Link>
</div>
<div className="header">
<Link className="link" to="/About"> 关于</Link>
</div>
<hr style={{margin:0}}/>
{
routes.map((route , key) => {
// return <Route key={index} path={item.path} component={item.component}></Route>
// if(route.exact){
// return <Route exact key={key} path={route.path}
// render={
// props => (
// <route.component {...props} routes={route.routes} />
// )
// } />
// }else{
return <Route key={key} path={route.path} render={
props => (
<route.component {...props} routes={route.routes} />
)
} />
// }
})
}
</div>
</BrowserRouter>
);
}
export default App;
Router.js文件
import About from './components/About'
import Home from './components/Home'
import New from './components/New'
import NewsContent from './components/NewsContent'
import Info from './components/Home/Info'
import Main from './components/Home/Main'
let routes = [
{
path:'/Home',
component:Home,
routes:[
{
path:'/Home/Info',
component:Info
},
{
path:'/Home/Main',
component:Main
},
]
},
{
path:'/New',
component:New
},
{
path:'/About',
component:About
}
]
export default routes
Home.js文件
import React from "react"
import { Link,Route } from "react-router-dom"
import '../style.css'
import Info from './Home/Info'
import Main from './Home/Main'
export default function Home(props){
console.log('props',props)
return (
<div className="contentList">
<ul className="leftList">
<li className="list">
<Link className="link" to="/Home/Info"> 用户信息</Link>
</li>
<li className="list">
<Link className="link" to="/Home/Main"> 个人中心</Link>
</li>
</ul>
<div className="rightContent">
{/* <Route exact path="/Home/" component={Info}></Route>
<Route path="/Home/Main" component={Main}></Route> */}
{
props.routes.map((route,key) => {
return <Route key={key} path={route.path} component={route.component}></Route>
})
}
</div>
</div>
)
}
withRuoter 的使用
可使组件获取当前路由对象
import React from "react";
import { withRouter } from "react-router-dom";
function Test(props) {
console.log(props, "------woshitest");
return <div>Test</div>;
}
Test = withRouter(Test);
export default function News(props) {
console.log(props, "woshi new");
const fun = () => {
props.history.push("/about");
};
return (
<div>
<Test />
<button onClick={fun}>click</button>
</div>
);
}
Link
<Button type="secondary" size='small' >
<Link to={{ pathname: '/base/strategyList',search:id+'', query: {sceneId:id,record:record} }}>查看</Link>
</Button>
获取值
componentDidMount() {
const {dispatch,location}=this.props;
let recvParam;
if(location.query&&location.query.record){//判断当前有参数
recvParam=location.query.record;
sessionStorage.setItem('data',recvParam);// 存入到sessionStorage中
}else{
recvParam=sessionStorage.getItem('data');// 当state没有参数时,取sessionStorage中的参数
}
this.setState({
recvParam
})
console.log("recvParam",recvParam)
}
事件触发型
第一种:
A页面 传参数
this.props.history.push{
pathname:’/router/url/send’,
query:{
“oneFlag”:one,
…
}
}
B页面 接收参数
this.props.location.query.oneFlag // one
…
路由路径显示:‘#/router/url/send/oneFlag?one’
第二种:
A页面 传参数
this.props.history.push{
pathname:’/router/url/send’,
state:{
“oneFlag”:one,
…
}
}
B页面 接收参数
this.props.location.state.oneFlag // one