2017-06-01 15:53:44 mapbar_front 阅读数 16915

1、exact
exact是Route下的一条属性,一般而言,react路由会匹配所有匹配到的路由组价,exact能够使得路由的匹配更严格一些。

exact的值为bool型,为true是表示严格匹配,为false时为正常匹配。

如在exact为true时,’/link’与’/’是不匹配的,但是在false的情况下它们又是匹配的。

一个常用的场景是这样的:

<Route path='/' component={Home} />
<Route path='/page' component={Page}>
//这种情况下,如果匹配路由path='/page',那么会把Home也会展示出来。

所以我们经常添加exact来解决上述问题。

<Route exact path='/' component={Home} />
<Route path='/page' component={Page} />

2、下面是八个react路由示例:(github上面)。

https://github.com/liwudi/react-router-dom1.git

https://github.com/liwudi/react-router-dom2.git

https://github.com/liwudi/react-router-dom3.git

https://github.com/liwudi/react-router-dom4.git

https://github.com/liwudi/react-router-dom5.git

https://github.com/liwudi/react-router-dom6.git

https://github.com/liwudi/react-router-dom7.git

https://github.com/liwudi/react-router-dom8.git

使用方式:在根目录下npm install,用于下载依赖的包,然后npm start启动项目。

2019-06-01 22:55:49 youlinaixu 阅读数 299
npm install react-router-dom

在App.js中引入路由:

import { BrowserRouter, Route } from 'react-router-dom';
<BrowserRouter>
	<div>
		<Route path='/' exact component={Home}></Route>
		<Route path='/detail' exact component={Detail}></Route>
	</div>
</BrowserRouter>
//exact表示精确地路由地址

在这里插入图片描述

还有一个进场用到的Link的方法

import { LInk } from 'react-router-dom';

在这里插入图片描述
动态路由:
在App.js中配置动态路由
在这里插入图片描述
从react-router-dom中引入Link
在这里插入图片描述
详情页面通过this.props.match.params.id接收到从home页面穿过来的数据,从而去请求该数据
在这里插入图片描述
在这里插入图片描述
参考博客:
https://blog.csdn.net/weixin_37242696/article/details/80798411

2018-12-29 15:09:01 qq_40147171 阅读数 421

Route中有一个exact属性,react(准确的),react路由会匹配到所有能匹配到的路由组件

例子如下:

<Route path='/' component={Main} />
<Route path='/page' component={Page}>

如果匹配路由path=’/Page’,那么会把Main也会展示出来

<Route exact path='/' component={Main} />
<Route path='/page' component={Page} />

加上exact属性

这样匹配路由path=’/page’,只会匹配到Page组件

2019-11-14 18:05:31 sw_onload 阅读数 4

react 用嵌套路由的时候不能用path=’/'来匹配显示默认页面搭配exact来严格匹配

 <Router>
                <Home>
                    <Route exact path="/" component={Main} render={()=>
                        <Main>
                            <Route  path="/a" component={About}></Route>
                        </Main>
                    }></Route>
                    <Route  path="/about" component={About}></Route>
                    <Route  path="/topic" component={Topic}></Route>
                </Home>
            </Router>
2019-12-24 17:43:42 xiaoenwu 阅读数 6

React 路由

一 、 认识路由/配置环境

1. BrowserRouter和HashRouter的区别

1)BrowserRouter as Router表示使用Router就是使用BrowserRouter

2)exact表示指定path只有在访问’/'的时候才展示component={Landing}里面的组件,这个属性可选择性使用

3) HashRouter 表示使用Router是使用HashRouter

4) BrowserRouter 和 HashRouter 都可以实现前端路由的功能,区别是前者基于rul的pathname段,后者基于hash段。

2. 配置环境
1)react里面的路由使用react-router-dom
2)安装 npm i -S react-router-dom 3)引入 在项目的App.js或者index.js中引入

二、使用HashRouter
    1. 创建项目

1)cmd打开命令行。

2)使用create-react-app 项目名 【创建项目】。

3)cd 创建的项目名进入项目目录,cnpm i react-router-dom -S 搭建路由环境。

2. 在src目录下创建index.js文件,用来获取目标元素渲染页面

import React from 'react';
//引入渲染DOM方法
import ReactDOM from 'react-dom';
//导入App文件
import App from './App';

//获取目标元素渲染页面
ReactDOM.render(<App></App>,document.querySelector("#root"))

3. 在src目录下创建App.js入口文件

//引入React
import React from 'react';
//引入路由依赖
import {HashRouter,Link,Route} from 'react-router-dom';
//导入首页文件(Home.js)
import Home from "./component/Home";
//导入新闻文件(News.js)
import News from "./component/News";
//导入关于我们文件(about.js)
import About from "./component/About";


//创建组件命名为App,继承React.Component组件。
class App extends React.Component{
  
  //要传到新闻的二级路由内容
  newsVal(){
    return("newsVal")
  }
  //要传到关于我们的二级路由内容
  aboutVal(){
    return("we are family!")
  }

  //渲染方法
  render(){
    return(
      // 使用HashRouter方法,注意,一个项目中只能由一个<HashRouter/>标签
      <HashRouter>
        <h1>这是根目录Father</h1>
        {/* 设置路由名称 */}
        <Link to="/home">首页</Link>  
        <Link to={`/news/fire/${this.newsVal()}`}>新闻</Link>  
        <Link to={`/about/famliy/${this.aboutVal()}`}>关于我们</Link>  
        <hr/>
        {/* 对应路由名称跳转到相应的页面 */}
        <Route path="/home" component={Home}></Route>
        <Route path="/news/:type/:id" component={News}></Route>
        <Route path="/about/:type/:id" component={About}></Route> 
      </HashRouter>
    );
  }
}

//导出App,向外暴露自己
export default App;

4. 在src目录下新建一个component文件夹,用来放二级路由文件

用来存放

5. 在component目录下创建Home.js首页二级路由需要的js文件

import React from "react";

//创建组件
class Home extends React.Component{
    //通过构造函数,继承获取传递过来的数据
    constructor(props){
        super();
        //创建state状态赋值为继承过来的类型,需要时可以调用
        this.state={
            p:props.match.params
        }
    }
    render(){
        return (
            <React.Fragment>
                <h1>首页</h1>
                     //调用类型获取其中数据
                <p>{this.state.p.type}--{this.state.p.id}</p>
            </React.Fragment>
        );
    }
}

//向外暴露导出组件
export default Home;    

6. 在component目录下创建News文件,新闻二级路由需要的js文件

import React from "react";

class News extends React.Component{
    constructor(props){
        super();
        this.state={
            p:props.match.params
        }
    }
    render(){
        return (
            <React.Fragment>
                <h1>新闻</h1>
                <p>{this.state.p.type}----{this.state.p.id}</p>
            </React.Fragment>
        );
    }
}

export default News;

7.在component目录下创建About.js文件,关于我们 二级路由需要的js文件

import React from "react";

class About extends React.Component{
   
    render(){
        return (
            <React.Fragment>
                <h1>关于我门</h1>
            </React.Fragment>
        );
    }
}

export default About;

react路由

阅读数 28

没有更多推荐了,返回首页