【在react中的路由】-博文推荐-CSDN博客

原

react做路由跳转，路由传参

2019-06-30 20:37:30 weixin_43606158 阅读数 14651

如果你项目当中用的是react全家桶，react + react-router + redux + axios + antd类似这样的组合的话那么做路由的话就是react-router，

首先要配置路由，关于react-router路由配置请看：
https://blog.csdn.net/weixin_43606158/article/details/90239415

而后可通过 this.props.history.push('./home')的方法进行路由跳转，或者使用react-router提供的Link组件或者NavLink组件进行路由跳转，关于Link组件和NavLink组件的详细使用还是可以看上面的链接哈~

如果你使用的是react+dva那么做路由跳转就这样做：

首先也是要配置路由。
而后可通过dva提供的dispatch进行路由跳转。
代码如下：

import {dispatch} from 'dva';
function Index(dispatch) {
	return (
	<div
		onClick={() => dispatch.history.push('/admin/login')}
	>回到登录页
	</div>
	)
}(dispatch)

路由传参：

如果要在路由调整的时候传递参数：

1.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

优势：刷新地址栏，参数依然存在
缺点:只能传字符串，并且，如果传的值太多的话，url会变得长而丑陋。
2.query

<Route path='/query' component={Query}/>
<Link to={{ path : ' /query' , query : { name : 'sunny' }}}>
this.props.history.push({pathname:"/query",query: { name : 'sunny' }});
读取参数用: this.props.location.query.name

优势：传参优雅，传递参数可传对象；
缺点：刷新地址栏，参数丢失
3.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.query.state

优缺点同query
4.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

优缺点同params

展开阅读原文

在react中的路由相关内容

原

关于React中的路由的react-router的案例

2017-03-07 09:16:10 kuangshp128 阅读数 1348

项目目录结构

项目文件结构

1.package.json文件内容

{
  "name": "react-router-demo01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --inline --host localhost --port 3000"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "css-loader": "^0.26.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^3.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  }
}

2.webpack.config.js文件的内容

'use strict';
module.exports = {
    entry:{
        index:'./index.js',
    },
    output:{
        path:__dirname,
        filename:'[name].build.js',
    },
    module:{
        loaders:[
            {
                test:/\.css$/,
                loaders:['style-loader','css-loader?modules']
            },
            {
                test:/\.(js|jsx)$/,
                exclude:'/node_modules/',
                loader:'babel-loader',
                query:{
                    presets:['es2015','react']
                }
            }
        ]
    },
    resolve:{
        extensions:['.js',".css",".jsx"]
    }
}

3.index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="app" class="container"></div>
</body>
<script src="./index.build.js"></script>
</html>

4.index.js文件

'use strict';
import React,{Component} from 'react';
import ReactDom from 'react-dom';
import {Router,Route,browserHistory,IndexRoute} from 'react-router';
import App from './App.jsx';
import Girls from './Girls.jsx';
import Boys from './Boys.jsx';
import Boy from './Boy.jsx';
import Home from './Home.jsx';
ReactDom.render(
    <Router history={browserHistory}>
        <Route path='/' component={App}>
            {/*主页显示的*/}
            <IndexRoute component={Home}/>
            <Route path='/body' component={Boys}>
                <Route path='/body/:boyName' component={Boy}/>
            </Route>
            <Route path='/girls' component={Girls}/>
        </Route>
    </Router>,
    document.getElementById('app')
)

5.App.jsx文件

import React, {Component} from "react";
import { Link,IndexLink } from 'react-router';

export default class App extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <h1 className="text-center">列表页面</h1>
                <div className="row">
                    <div className="col-md-3">
                        <ul className="list-group">
                            <li className="list-group-item"><IndexLink to="/" activeStyle={{ color: 'red' }}>返回首页</IndexLink></li>
                            <li className="list-group-item"><Link to="/girls" activeStyle={{ color: 'red' }}>点击我到女神页面</Link></li>
                            <li className="list-group-item"><Link to="/body" activeStyle={{ color: 'red' }}>点击我到男神页面</Link></li>
                        </ul>
                    </div>
                    <div className="col-md-9" style={{border:'1px solid #ddd'}}>
                        {this.props.children}
                    </div>
                </div>
            </div>
        )
    }
}

6.Home.jsx的文件

import React, {Component} from "react";

export default class Home extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>~~男神女神~~</div>
        )
    }
}

7.Boy.jsx文件

import React, {Component} from "react";

export default class Boy extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <h2>大家好，我是{this.props.params.boyName}，我爱你们~~</h2>
            </div>
        )
    }
}

8.Bodys.jsx文件

import React, {Component} from "react";
import {Link} from 'react-router';
export default class Boys extends Component {
    constructor(props) {
        super(props);
    }
    handleSubmit(event) {
        event.preventDefault()
        const boyName = event.target.elements[0].value
        const path = `/repos/${boyName}`
        console.log(path)
    }
    render() {
        return (
            <div>
                <h2>我的男神们：</h2>
                <ul className="list-group">
                    <li className="list-group-item"><Link to="/body/宋仲基">宋仲基</Link></li>
                    <li className="list-group-item"><Link to="/body/吴亦凡">吴亦凡</Link></li>
                    <li className="list-group-item">
                        <form onSubmit={this.handleSubmit}>
                            <input type="text" placeholder="boyName"/> / {' '}
                            <button type="submit">Go</button>
                        </form>
                    </li>
                </ul>
                {this.props.children}
            </div>
        )
    }
}

9.Girls.jsx

import React, {Component} from "react";

export default class Girls extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>我是女神</div>
        )
    }
}

展开阅读原文

在react中的路由相关内容

原

React-路由的使用

2019-06-26 09:18:03 xiaodi520520 阅读数 1562

react英文版官网: https://reacttraining.com/react-router/

一.仿照官网来个小案例(声明式路由)

1.安装React路由

cnpm i --save react-router-dom

2.创建一个新的router.js文件,并在App.js中导入这个路由文件
在这里插入图片描述
3.在router.js文件中粘贴官方的第一个路由案例;

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/topics">Topics</Link>
          </li>
        </ul>

        <hr />

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/topics" component={Topics} />
      </div>
    </Router>
  );
}

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function Topics({ match }) {
  return (
    <div>
      <h2>Topics</h2>
      <ul>
        <li>
          <Link to={`${match.url}/rendering`}>Rendering with React</Link>
        </li>
        <li>
          <Link to={`${match.url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
        </li>
      </ul>

      <Route path={`${match.path}/:topicId`} component={Topic} />
      <Route
        exact
        path={match.path}
        render={() => <h3>Please select a topic.</h3>}
      />
    </div>
  );
}

function Topic({ match }) {
  return (
    <div>
      <h3>{match.params.topicId}</h3>
    </div>
  );
}

export default BasicExample;

4.实现效果:
在这里插入图片描述
上面就是声明式路由的写法,解释:

1.BrowserRouter as Router: //这个as是起别名的意思,这句话的意思是BrowseerRouter起别名为Router,这样在下面的标签里就可以直接使用<Router></Router>了。

2.总体的步骤分为三步:
a.配置路由的容器Router;
b.配置路由的连接LInk;
c.配置路由填充的位置以及路径和组件的映射关系;

上面的Topics是一个嵌套路由:

疑惑点解释:
在这里插入图片描述
总结嵌套路由的步骤:

a.在父路由的组件中配置子路由;
b.子路由中同样需要配置Link和Route;

5.路由的参数传递

方式:在路由的路径中通过[:参数名称]来进行传递,改参数在路由匹配的组件中通过[match.params.参数名]来获取。
英文官网案例：
在这里插入图片描述

6.路由的重定向

路由的重定向通过来重定向。
在这里插入图片描述

官网附带了一个登录权限的逻辑代码，网站地址：https://reacttraining.com/react-router/web/example/basic

ps:
1.官网的重命名写法
在这里插入图片描述
2.使用箭头函数事件可以不用绑定this.操作如下:

7.404页面

import React from 'react'
import { BrowserRouter as Router, Link, Route, Redirect,Switch} from 'react-router-dom'
class RouterTest extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      flag: false
    }
  }
  handleClick=()=>{
      this.setState({
          flag:true
      })
  }

  render() {
    return (
      <div>
        <Router>
          <div>
            <ul>
              <li>
                <Link to="/home">Home</Link>
              </li>
              <li>
                <Link to="/about">About</Link>
              </li> 
              <li>
                  <Link to='/NoMatch'>NoMatch</Link>
              </li>
              
            </ul>
            <button onClick={this.handleClick}>点击跳转</button>
            <hr />
            <Switch>
            <Route exact path="/home" component={Home} />
            <Route path="/about" component={About} />
            <Route component={NoMatch} />
            {this.state.flag&&<Redirect to='/about'/>}
            </Switch>
          </div>
        </Router>
      </div>
    )
  }
}

const Home=()=> {
    return (
      <div>
        <h2>Home</h2>
      </div>
    );
  }
  
 const About=()=>{
    return (
      <div>
        <h2>About</h2>
      </div>
    );
  }

  const NoMatch=()=>{
      return (
          <div>
          404
          </div>
      )
  }

  
export default RouterTest;

实现效果:
在这里插入图片描述

二.编程式路由的跳转

步骤:
先安装路由,安装好后操作
1.在路由官网的redirect重定向里有一个withRouter,按照官网的导入方式到进来

import {withRouter} from 'react-router-dom'

2.将这个组件包裹起来

export default withRouter(Login)

3.在提交登录的事件里,先解构赋值const {history}=this.props(这解构的意思是将this.props对象里的history属性拿出来,后面可以直接使用),判断可以登录时,直接用编程式导航跳转到首页(history.push(’/home’))即可。

在这里插入图片描述

react英文版官网: https://reacttraining.com/react-router/
react中文版官网:http://react-guide.github.io/react-router-cn/docs/Introduction.html

展开阅读原文

在react中的路由相关内容

原

15 React——路由配置（动态路由&GET传值）

2018-11-05 15:46:13 qq_35117024 阅读数 5268

一、动态路由

我们通过配置基本路由，可以实现页面间的切换，但是如果在一个页面中有一列表标题，我们点击各个标题，就能进入到此标题所表示的内容页面中，这该如何实现呢，下面就要用到我们的动态路由了，实际效果如下图所示：

首先，我们已经在App根组件中已经配置了主页、新闻、产品三个组件的路由，如下：

接下来我们要在News组件中定义一组数据，然后将其渲染到页面上，如图：

上述定义的数据就是在新闻组件页面上显示的新闻列表，我们通过点击每一个列表，页面就能跳转，那其实就是配置各个列表和详细内容之间的路由。具体操作如下：

1 在App根组件中引入内容模块，并将路由配置到内容页面，如下：

2 在新闻组件页面配置各个标题的路由，如下：

3 至此，一个简单的动态路由基本配置完成了，我们点击每一项列表，都能跳转到内容页面，但是我们要做的是还要获取列表的aid属性，此时，我们继续来看。

4 修改App根组件中的路由配置代码，如下：

在我们原来的基础上增加aid。然后修改新闻组件中的部分代码，如下：

同样的，也是运用了ES6的语法将aid的值传递过去，此时我们点击列表切换页面时，地址栏已经出现了aid的值，如图：

5 我们将这个aid的值获取下来。这个时候我们就可以用生命周期函数，在内容组件中可以通过this.props来获取到这个aid的值，如图：

以上的过程就是动态路由。

二、Get传值

Get传值实现的效果就是在地址栏显示如下形式：

这样一来的话我们只需要修改原来的组件中传值的形式和根组件中路由配置就可以，如下所示：

传值形式：

路由配置：

如果我们想获取地址栏中的aid的值，同样的，就要用到此产品内容组件的生命周期函数，然后用this.props获取即可，最终效果如下：

以上是关于Get传值的过程。

上述两部分演示，新闻组件演示的是动态路由的传值，产品组件演示的是Get的传值。以下是关于这两部分的一个总结，如下：

展开阅读原文

在react中的路由相关内容

原

React多级路由 React子路由

2020-03-10 16:04:07 yj6232779 阅读数 317

React多级路由 React子路由设置

新建一个Home.jsx文件和Home.css文件 css文件内容就不写了 Home 文件内容如下
为了解决点击Link时，路由变化而子路由页面未变化，所以需要在窗口中加入key属性。

import "./Home.css"
import React,{ Component } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";


import Child1 from '../../components/child1/Child1';
import Child2 from '../../components/child2/Child2';


class Home extends Component{
    render (){
        return (
            <div className="home">
                <aside className="home_menu">
                    <button><Link to={`${this.props.match.path}/child1`}>子路由1</Link></button>
                    <button><Link to={`${this.props.match.path}/child2`}>子路由2</Link></button>
                </aside>
                <section className="home_section" key={this.props.location.key}> 
                    <Router>
                        <Route path={`${this.props.match.path}/child1`} component={Child1} />
                        <Route path={`${this.props.match.path}/child2`} component={Child2} />
                    </Router>
                </section>
            </div>
            
        )
    }
}

export default Home

2.新建子路由1页面Child1.jsx：

import "./Child1.css"
import React,{ Component } from "react";
class Child1 extends Component{
    render(){
        return(<div className="Child1">child1</div>)
    }
}

export default Child1

3.新建子路由2页面Child2.jsx：

import "./Child2.css"
import React,{ Component } from "react";
class Child2 extends Component{
    render(){
        return(<div className="child2">child2</div>)
    }
}

export default Child2

3.新建一个router文件夹，在文件夹中新建index.js, 如果需要react jsx的写法需引入react
需要安装 react-router-dom 安装命令： npm i -S react-router-dom 引入所需配置。直接上代码：

//引入react jsx写法的必须
import React from 'react'; 
import { BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom'; //需要安装  npm i -S react-router-dom


//引入需要用到的页面组件 
import Login from '../views/login/Login';
import Home from '../views/home/Home';

function router(){
    return (
        <Router>
            <Switch>   
                <Route exact={true}  path="/" component={Login} /> {/**exact 防止混路由混合   如：输入127.xx.xx.xx/home 中有/login页面*/}
                <Route path="/home" component={Home} />
            </Switch>
        </Router>
    )
}

export default router;

4.然后在react项目根目录中的index.js中（入口文件）引入路由文件夹（router）中的index.js。到此完成子路由的配置。代码如下：

import React from 'react';
import ReactDOM from 'react-dom';


import './index.css';
// import App2 from './App';
import Router from './router/index'
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<Router />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

最后直接上效果：
在这里插入图片描述

展开阅读原文

在react中的路由相关内容