exact react中的路由_react exact 匹配不到路由 - CSDN
  • exact是Route下的一条属性,一般而言,react路由会匹配所有匹配到的路由组价,exact能够使得路由的匹配更严格一些。exact的值为bool型,为true是表示严格匹配,为false时为正常匹配。如在exact为true时,’/link’与...

    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启动项目。

    展开全文
  • 关于react路由,与结合vue-router对比,实际上配置更复杂,虽然有各种轻量级框架对react-router进行封装,单还需了解基本原理,废话不多说,上代码 路由 我这里采用es6的写法,与官文相比,使用有状态的react组件...

    序言

    关于react的路由,与结合vue-router对比,实际上配置更复杂,虽然有各种轻量级框架对react-router进行封装,单还需了解基本原理,废话不多说,上代码

    路由

    我这里采用es6的写法,与官文相比,使用有状态的react组件实现嵌套路由,首先搭建好环境,我这里利用create-react-app脚手架工具,不知道的同学请看参考文档,搭建好的项目结构如下

    在这里插入图片描述
    引入react-router,有cnpm和yarn命令可替换下图

    npm i react-router-dom --save
    

    将server运行起来后,将src/App.js文件修改如下

    import React, { Component } from 'react';
    import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
    
    class App extends Component {
      render() {
        return (
          <div className="App">
            <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>
          </div>
        );
      }
    }
    
    function Home() {
      return (
        <div>
          <h2>Home</h2>
        </div>
      );
    }
    
    function About() {
      return (
        <div>
          <h2>About</h2>
        </div>
      );
    }
    
    class Topics extends Component {
      componentDidMount() {
        console.log(this);
      }
      render() {
        const { match } = this.props;
        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>
        )
      }
    }
    
    class Topic extends Component {
      render() {
        const { match } = this.props;
        return (
          <div>
            <h3>{match.params.topicId}</h3>
          </div>
        );
      }
    }
    
    export default App;
    
    

    这里重点说下从react-router-dom引入的Route附件,Route的位置代表了所对应的component显示的位置,这一点很重要

    Topics 所对应的路由组件下又进行了Route的设置,并且在子组件Topic的路由配置中拿到父组件的相对路径match.url,这种写法有利于路由组件的维护,即使改变了层级,子路由的path也不用改变,需要注意当时组件是否有传入路由参数。

    exact 属性

    关于Route的exact,加上exact代表当前路由path的路径采用精确匹配,比如说Home的path如果不加上exact,那么path="/about"将会匹配他自己与path="/“这两个,所以一般path=”/"这个路由一般会加上exact,另外需要注意一点的是嵌套路由不要加exact属性,如果父级路由加上,这里例如topics加上该属性,他下面的子路由将不会生效,因为外层强制匹配了。

    react-router总体来讲配置还是挺复杂的,需要提前构思好整个路由如何搭建,望诸君多多尝试,上诉代码已上传至gitHub有兴趣可下载自行尝试

    展开全文
  • React多级路由 React路由设置 新建一个Home.jsx文件 和Home.css文件 css文件内容就不写了 Home 文件内容如下 为了解决点击Link时,路由变化而子路由页面未变化,所以需要在窗口加入key属性。 import "./Home....

    React多级路由 React子路由设置

    1. 新建一个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 route中exact用法

    2019-10-28 16:31:22
    在学习自己配置路由是遇到这个问题,就是 <Route path='/goods' component={Goods} /> <Route path='/goods/:id' component={GoodDetail} /> 当匹配路由为/goods/:id,会匹配Goods组件和GoodDetail...

    在学习自己配置路由是遇到这个问题,就是

    <Route path='/goods' component={Goods} />
    <Route path='/goods/:id' component={GoodDetail} />

    当匹配路由为/goods/:id,会匹配Goods组件和GoodDetail组件

    但是我们期望得到GoodDetail

    解决方法有两种:

    1. 使用switch组件包裹route,类似switch语句一样匹配,从上线下找到第一个匹配的 Route,匹配中了之后,立刻就 break

    <switch>
        <Route path='/goods' component={Goods} />
        <Route path='/goods/:id' component={GoodDetail} />
    </switch>

    2. 使用exact属性

    这时可以使用exact来实现

    <Route path='/goods' exact component={Goods} />
    <Route path='/goods/:id' component={GoodDetail} />

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

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

    展开全文
  • React属性exact

    2018-12-29 15:09:01
    Route有一个exact属性,react(准确的),react路由会匹配到所有能匹配到的路由组件 例子如下: &lt;Route path='/' component={Main} /&gt; &lt;Route path='/page' component={Page}&gt; 如果...
  • 在使用react路由之前,下载路由依赖 : npm(cnpm) installreact-router-dom -s 在App.js进行配置: exact是什么? exact 是精确匹配的意思 不加exact时,下面路由不管点击谁都没有变,因为都匹配了 / 加...
  • 安装 react-router-dom npm install react-router-dom --save-dev 报错: Can’t resolve 'react-router-dom’ 说明 项目缺少 react-router-dom 模块 命令 npm i react-router-native 安装这个模块 成功后 文件 ...
  • React-路由的使用

    2019-06-26 09:18:03
    1.安装React路由 cnpm i --save react-router-dom 2.创建一个新的router.js文件,并在App.js导入这个路由文件 3.在router.js文件粘贴官方的第一个路由案例; import React from "react...
  • React路由匹配的问题

    2020-07-17 10:52:20
    最近在写 React 项目时,被 React 路由匹配的问题折磨的够呛,这里来分享一下其中的一些坑,以及我的路由配置组件。 前提 安装路由 npm i react-router-dom -S 用 react-router-dom 不用 react-router 的原因: ...
  • 刚刚接触react不久,发现在项目路由配置会有switch和exact的使用,现总结如下 switch 为了解决route的唯一渲染(仅仅渲染一个路由路径)出现的 <Switch>是唯一的因为它仅仅只会渲染一个路径。...
  • React动态路由路由权限控制;通过角色身份删除对应的路由规则使用场景实现思路将全局路由整合通过react-redux实现全局修改路由渲染组件最后一步大功告成重置路由规则写在最后 使用场景 我们一般在做类似于后台管理...
  • react中路由配置

    2019-06-03 20:48:18
    在App.js引入路由: import { BrowserRouter, Route } from 'react-router-dom'; <BrowserRouter> <div> <Route path='/' exact component={Home}></Route> ...
  • React系列之--项目中React 路由搭建demo关于react-router网上有很多介绍,在这里必要唠叨,其中在项目中react-router和react-router-dom功能是一样的,引用一个就可以了。1、react-router4.0以上的介绍。 发现一篇...
  • React利用路由实现登录界面的跳转 上一篇在配置好了webpack和react的环境后,接下来开始写登录界面,以及接下来的跳转到主页的功能。 **1、首先看一下总体的目录结构。**因为很多时候在看别人写的例子的时候因为...
  • React 学习 React 路由 ...因为它的用户体 验更好、对服务器的压力更小,所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能,前端...前端路由是一套映射规则,在 React ,是 URL 路径 与 组件 的对应关...
  • 路由守卫是开发很常用的功能,然而reactRouter是没有提供路由守卫的api的,只能由我们自己实现。我会先实现路由守卫的基本功能,然后逐步完善它。于是我将分两个阶段对代码做介绍。 阶段一:实现基本功能 阶段二:...
  • 业务会遇到点击列表跳转到详情页, 1.在index.js修改我们的跟组件 ...import React from 'react' import { HashRouter as Router, Route, // Link, Switch } from 'react-router-dom' import Main fr...
  • React_路由+路由传参

    2019-11-06 09:27:28
    路由 react-router 实现了路由的核心功能 路由操作组件 react-router-dom 基于react-router,加入了在浏览器运行环境的一些功能 获取路径名如下图: 例如: Link组件,会渲染一个a标签 navLink组件 ...
  • React router 中exact

    2020-03-10 11:12:44
    exact表示绝对匹配/index,如果不注明exact,则/index还会匹配/index/new等等 <li><NavLink exact to="/index" activeStyle={{ color: '#4dc060' }}>首页列表项目 </NavLink></li> <li>...
1 2 3 4 5 ... 20
收藏数 2,603
精华内容 1,041
关键字:

exact react中的路由