React-Router的基本配置
1、找到官方文档 https://reacttraining.com/react-router/web/example/basic
2、安装 cnpm install react-router-dom --save
3、找到项目的根组件引入react-router-dom
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
4、复制官网文档根组件里面的内容进行修改 （加载的组件要提前引入）而且Router里面一般是有个唯一父级div的
<Router>
<Link to="/">首页</Link>
<Link to="/news">新闻</Link>
<Link to="/product">商品</Link>
<Route exact path="/" component={Home} />
<Route path="/news" component={News} />
<Route path="/product" component={Product} />
</Router>
5. exact表示严格匹配,否则路由/的对应的组件在匹配其他路由的时候也会显示出来
基本案例
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import './assets/css/index.css'
import Home from './components/Home';
import News from './components/News';
import Product from './components/Product';
class App extends Component {
render() {
return (
<Router>
<div>
<header className="title">
<Link to="/">首页</Link>
<Link to="/news">新闻</Link>
<Link to="/product">商品</Link>
</header>
<br />
<Route exact path="/" component={Home} />
<Route path="/news" component={News} />
<Route path="/product" component={Product} />
</div>
</Router>
);
}
}
export default App;
路由传参
动态路由
- 首先在app.jsx中添加路由(分别是新闻列表页面和新闻详情页面)
<Route path="/news" component={News}></Route>
<Route path="/content/:aid" component={Content}></Route>
2.下面是对应的代码
News.jsx:
import React, { Component } from 'react';
import { Link } from "react-router-dom";
class News extends Component {
constructor(props){
super(props)
this.state={
infos:[
{
aid:1,
info:"河南"
},
{
aid:2,
info:"江苏"
}
]
}
}
render() {
return (
<div>
{
this.state.infos.map((value,index)=>{
return <p key={index}><Link to={`/content/${value.aid}`}>{value.info}</Link></p>
})
}
</div>
);
}
}
export default News;
Content.jsx:
import React, { Component } from 'react';
class Content extends Component {
constructor(props){
super(props)
}
componentDidMount(){
//获取动态路由传参需要在生命周期内，但是不一定是当前生命周期
//获取传参，aid对应的是app.jsx中的path="/content/:aid"
console.log(this.props.match.params.aid);
}
render() {
return (
<div>
</div>
);
}
}
export default Content;
get传值
- 首先在app.jsx中添加路由(分别是新闻列表页面和新闻详情页面)
//注意此处和上面动态路由有区别，动态路由是:aid,而get传值不需要
<Route path="/pcontent" component={Pcontent}></Route>
<Route path="/pnews" component={Pnews}></Route>
2.下面是对应的代码
Pnews.jsx
import React, { Component } from 'react';
import { Link } from "react-router-dom";
class Pnews extends Component {
constructor(props){
super(props)
this.state={
infos:[
{
aid:1,
info:"北京"
},
{
aid:2,
info:"上海"
}
]
}
}
render() {
return (
<div>
{
this.state.infos.map((value,index)=>{
return <p key={index}><Link to={`/pcontent?aid=${value.aid}`}>{value.info}</Link></p>
})
}
</div>
);
}
}
export default Pnews;
Pcontent.jsx
import React, { Component } from 'react';
class Pcontent extends Component {
constructor(props){
super(props)
}
componentDidMount(){
//获取get传值 ?aid=1
//解析可以使用npm上面的url模块
console.log(this.props.location.search);
}
render() {
return (
<div>
</div>
);
}
}
export default Pcontent;
解析html
<div dangerouslySetInnerHTML={{__html:
<p>解析html字符串</p>}}></div>
js动态路由跳转
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link,Redirect } from "react-router-dom";
class Home extends Component {
constructor(){
super()
this.state={
flag:false
}
}
//修改对应标记位的状态，render函数会重新执行
fromjs2new=()=>{
this.setState({
flag:true
})
}
render() {
//判断标记位之后，因为点击事件下面方法会进入，然后重定向实现js动态路由跳转
if(this.state.flag){
return <Redirect to={{pathname:'/news'}}/>
}
return (
<div>
<p>这是Home组件</p>
<input type="button" value="跳转到新闻界面" onClick={this.fromjs2new}/>
</div>
);
}
}
export default Home;
路由嵌套
1. 首先在app.jsx中设置如下
<Route exact path="/shop" component={Shop} />
<Route path="/home" component={Home}/>
/*注意：如果是加了exact，因为设置了严格匹配貌似，所以不能加路由嵌套,
如果出现默认页面/需要切换的场景，最好换为组件切换或者不设置exact
如果不是/路由，加不加exact无影响，所以可以去掉*/
2.Home.jsx
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Info1 from './Home/Info1.jsx';
import Info2 from './Home/Info2.jsx';
import ShopAdd from './Shop/ShopAdd.jsx';
import ShopList from './Shop/ShopList.jsx';
class Home extends Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
{/* <Link to="/shop/">商户列表</Link>
<Link to="/shop/add">增加商户</Link>
<Route exact path="/shop/" component={ShopList} />
<Route path="/shop/add" component={ShopAdd} /> */}
<Link to='/home/'>信息一</Link>
<Link to='/home/info'>信息二</Link>
<Route exact path="/home/" component={Info1} />
<Route path="/home/info" component={Info2} />
</div>
);
}
}
export default Home;
路由模块化
APP.jsx:
import React, { Component } from 'react';
import './assets/css/App.css';
import Home from './components/Home.jsx';
import New from './components/New.jsx';
import { BrowserRouter as Router, Route,Link } from "react-router-dom";
import Info1 from './components/New/Info1.jsx';
import Info2 from './components/New/Info2.jsx';
//甚至把它单独提出一个js的文件
//export default routes
let routes=[
{
path:'/',
component:Home,
exact:true
},
{
path:'/new',
component:New,
routechilden:[
{
path:'/new/',
component:Info1
},
{
path:'/new/info',
component:Info2
}
]
}
]
class App extends Component {
render() {
return (
<Router>
<div>
<Link to='/new'>新闻页面</Link>
{/* 不需要配置嵌套路由的写法
{
routes.map((route,index)=>{
if(route.exact){
return <Route exact key={index} path={route.path} component={route.component}/>
}else{
return <Route key={index} path={route.path} component={route.component}/>
}
})
} */}
{/* 需要配置嵌套路由的写法
以下写法是基本上的固定写法，因为组件传参的方式在路由
中无效，所以下面适用于子路由存在的情况下
但是下面childroutes这个是可以自定义，但是不能是
childerns(可能内部已经使用)
*/}
{
routes.map((route,index)=>{
if(route.exact){
return <Route exact key={index} path={route.path} render={
props=>(
<route.component {...props} childroutes={route.routechilden}/>
)
}/>
}else{
return <Route key={index} path={route.path} render={
props=>(
<route.component {...props} childroutes={route.routechilden}/>
)
}/>
}
})
}
</div>
</Router>
);
}
}
export default App;
New.jsx:
import React, { Component } from 'react';
import { BrowserRouter as Router, Route,Link } from "react-router-dom";
class New extends Component {
constructor(props){
super(props)
}
componentDidMount(){
//获取路由参数
console.log(this.props.childroutes);
//注意：也可以在state里面设置一个变量
//routes当做空数组，然后在此处重新赋值，同样效果
}
render() {
return (
<div>
新闻 <br/>
<Link to='/new/'>信息一</Link>
<Link to='/new/info'>信息二</Link>
{
this.props.childroutes.map((route,index)=>{
if(route.exact){
return <Route exact key={index} path={route.path} component={route.component}/>
}else{
return <Route key={index} path={route.path} component={route.component}/>
}
})
}
</div>
);
}
}
export default New;
