0
点赞
收藏
分享

微信扫一扫

React路由

向上的萝卜白菜 2021-09-27 阅读 50
日记本React

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;

路由传参

动态路由

  1. 首先在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传值

  1. 首先在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

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;
举报

相关推荐

react路由-react路由的跳转以及路由信息

日记本react前端开发那些事儿

[react] 路由

react.jsTestAPISPA编程语言

react 路由

爬虫石墨文档

react路由

react.jsjavascript前端

React 路由

React基础前端

Vue路由和React路由

vue.jsreact.jsjavascript

React笔记(七) React路由

react.js

React路由+1

react.jsjavascript前端

react路由props

react.js前端

React 页面路由

react.js前端javascript
0 条评论