精华内容
下载资源
问答
  • react路由

    2019-11-01 15:41:11
    React路由

    React路由

    展开全文
  • React路由

    2020-10-22 20:24:10
    React路由 安装 如果想要使用react路由,则需要安装react-router-dom 在该模块中,我们会经常使用BrowserRouter,HashRouter,Route,Switch,Redirect,Link,NavLink 使用 import React, { Component } from '...

    React路由

    安装

    如果想要使用react路由,则需要安装react-router-dom

    在该模块中,我们会经常使用BrowserRouterHashRouterRouteSwitchRedirectLinkNavLink

    使用

    import React, { Component } from 'react'
    import { HashRoter as Router, Route } from 'react-router-dom'
    
    class Router extends Component {
      constructor (props) {
        super(props)
        
      } 
    
      render () {
        reture (
          <Router>
            // 每个路由配置都是一个Route
            <Route exact path="/" component={}></Route>
            <Route></Route>
            <Route></Route>
            <Route></Route>
          </Router>
        )
      }
    }
    

    嵌套路由

    import React, { Component } from 'react'
    import { HashRoter as Router, Route } from 'react-router-dom'
    
    class Router extends Component {
      constructor (props) {
        super(props)
        
      } 
    
      render () {
        return (
          <Router>
            // 每个路由配置都是一个Route
            <Route exact path="/" component={}></Route>
            // 嵌套路由有两种方式 1 使用render和父路由写在一起,需要给子组件中添加this.props.children
            <Route render={() => (
              <组件>
                <Route path="" componet={}></Route>
              </组件>
            )}></Route>
    
            // 2 把子路由写在对应的组件中
    
            <Route exact path="/" component={Child}></Route>
    
          </Router>
        )
      }
    }
    

    Child.js

    import React, { Component } from 'react'
    import { Route } from 'react-router-dom'
    
    class Router extends Component {
      constructor (props) {
        super(props)
        
      } 
    
      render () {
        return (
          <div>
            <Route path="" component={}></Route>
            <Route path="" component={}></Route>
            <Route path="" component={}></Route>
            <Route path="" component={}></Route>
          </div>
        )
      }
    }
    

    参数接收

    params 动态路由

    <Route to="/demo/:id"></Route>
    
    this.props.match.params.id // 刷新页面不会消失
    

    query

    需要借助Link进行页面的跳转

    <Link to={{pathname: '/demo', query: {id: 1}}}></Link>
    
    this.props.location.query.id // 刷新页面后数据消失
    

    state

    需要借助Link进行页面的跳转

    <Link to={{pathname: '/demo', state: {id: 1}}}></Link>
    
    this.props.location.state.id // 刷新页面后数据不会消失
    
    展开全文
  • React 路由

    2020-07-09 10:25:31
    react 路由使用步骤 (此文档为react路由 4.x 版本) 1、终端下载 react-router 插件 npm install react-router-dom --save 2、react 项目入口文件导入 import { BrowserRouter as Router } from 'react-router-...

    react 路由使用步骤 (此文档为react路由 4.x 版本)

    1、终端下载 react-router 插件

       npm install react-router-dom --save
    

    2、react 项目入口文件导入

       import { BrowserRouter as Router } from 'react-router-dom'
    

    //确定路由使用范围

    	ReactDOM.render(
    	                //Router组件包裹app根标签,表示根标签中都能使用路由
    	  		<Router>
    	    			<App />
    	    		</Router>,
    	  		document.getElementById('root')
    		);
    

    3、 创建路由文件src/router/index.js,并从路由模块中导入工具组件Route

    	import { Route } from "react-router-dom";
    

    4, 创建路由组件,配置路由, 并导出

       // 导入react
          import React from "react"
       // 从路由模块中导入工具组件Route 
          import { Route } from "react-router-dom";
       // 导入路由控制跳转的组件
          import Home from "../views/Home"
          import Order from "../views/Order"
          import User from "../views/User"
    
       // 用函数创建  路由组建  并导出
          export default function MyRouter() {
            return (
              <div>
                {/*通过Route组件配置路由,一个<Route>对应一个路由
                exact 表示精准匹配,只有路径完全一致才能匹配 */}
                <Route exact path="/" component={Home} />
                <Route exact path="/user" component={User} />
                <Route exact path="/order" component={Order} />
              </div>
            )
          }
    

    5, 在app.js中导入路由组件

    	import RouterView from './router/index';
    

    6, 在根组件app模板中添加路由组件,即路由出口

    	<RouterView></RouterView>
    

    7, 在需要跳转的页面, 从路由模块导入工具组件 Link

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

    8, 使用Link组件执行路由跳转

    	<Link to="/">首页/Link>
    
    展开全文
  • react 路由

    2020-08-28 18:37:33
    react 路由小结路由的基本使用 路由的基本使用 安装:yarn add react-router-dom 导入:import {HashRouter,Link,Route,Switch,Redirect} from 'react-router-dom' HashRouter:定义哈希路由整体的容器标签。 Link...

    路由的基本使用

    安装:yarn add react-router-dom
    导入:import {HashRouter,Link,Route,Switch,Redirect} from 'react-router-dom'

    HashRouter:定义哈希路由整体的容器标签。
    Link:单个标签,定义路由的链接,通过to属性来定义链接地址。
    Route:单个标签,定义组件的容器,通过path定义和Linkto属性对应的地址,component属性定义链接对应的组件。
    Switch:多个Route标签外面的标签,如果需要定义404跳转和重定向跳转,需要用此标签包裹Route标签。
    Redirect:定义路由重定向,通过from属性定义原始路由,通过to属性定义重定向路由。

    注意: 路由是模糊匹配,精确匹配要加exact

    例🌰1: 需求:

    • 在地址栏输入,即 切换到对应的页面
    import React from 'react';
    import ReactDOM from 'react-dom';
    
    // 导入路由相关的组件
    import { HashRouter, Route } from 'react-router-dom';
    
    // 定义路由切换的组件
    function Page01() {
      return <h1>页面内容一</h1>
    }
    
    function Page02() {
      return <h1>页面内容二</h1>
    }
    
    function Page03() {
      return <h1>页面内容三</h1>
    }
    
    class App extends Component {
      render() {
        return (
          <HashRouter>
            {/* 路由默认是模糊匹配,"/page02" 也匹配"/",如果希望精确匹配,可以加"exact"关键字 */}
            <Route exact path="/" component={Page01} />
            <Route path="/page02" component={Page02} />
            <Route path="/page03" component={Page03} />
          </HashRouter>
        )
      }
    }
    
    ReactDOM.render(<App />, document.getElementById('root'));
    

    页面样式:
    页面样式


    例🌰2: 需求:

    • 点击Link标签,即 切换到对应的页面
    
    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    
    import { HashRouter, Route, Link } from 'react-router-dom';
    
    function Page01() {
      return <h1>页面一</h1>
    }
    
    function Page02() {
      return <h1>页面二</h1>
    }
    
    function Page03() {
      return <h1>页面三</h1>
    }
    
    /* 定义一个类组件,继承于 React.Component , 至少有 render 方法 */
    class App extends React.Component {
    
      render() {
        return (
          <HashRouter>
            <Link to="/">跳转到页面一</Link>
            <br />
            <Link to="/page02">跳转到页面二</Link>
            <br />
            <Link to="/page03">跳转到页面三</Link>
    
            <Route exact path="/" component={Page01} />
            <Route path="/page02" component={Page02} />
            <Route path="/page03" component={Page03} />
          </HashRouter>
        )
      }
    }
    
    ReactDOM.render(<App />, document.getElementById('root'));
    

    页面样式:
    页面样式


    例🌰3: 需求:

    • 点击Link标签,即 切换到对应的页面
    • 无效地址,则跳转到404页面。

    Route搭配Switch显示404页面。

    
    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    
    import { HashRouter, Route, Link, Switch } from 'react-router-dom';
    
    function Page01() {
      return <h1>页面一</h1>
    }
    
    function Page02() {
      return <h1>页面二</h1>
    }
    
    function Page03() {
      return <h1>页面三</h1>
    }
    
    function NotFound() {
      return <h1>404页面</h1>
    }
    
    /* 定义一个类组件,继承于 React.Component , 至少有 render 方法 */
    class App extends React.Component {
    
      render() {
        return (
          <HashRouter>
            
            <Link to="/">跳转到页面一</Link>
            <br />
            <Link to="/page02">跳转到页面二</Link>
            <br />
            <Link to="/page03">跳转到页面三</Link>
    
            <Switch >
              <Route exact path="/" component={Page01} />
              <Route path="/page02" component={Page02} />
              <Route path="/page03" component={Page03} />
              {/* 定义404页面的路由,写在最下面 */}
              <Route component={NotFound} />
            </Switch >
    
          </HashRouter>
        )
      }
    }
    
    ReactDOM.render(<App />, document.getElementById('root'));
    

    页面样式:
    页面样式


    例🌰4: 需求:

    • 点击Link标签,即 切换到对应的页面
    • 无效地址,则跳转到404页面
    • /重定向为/page01
    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    
    import { HashRouter, Route, Link, Switch, Redirect } from 'react-router-dom';
    
    function Page01() {
      return <h1>页面一</h1>
    }
    
    function Page02() {
      return <h1>页面二</h1>
    }
    
    function Page03() {
      return <h1>页面三</h1>
    }
    
    function NotFound() {
      return <h1>404页面</h1>
    }
    
    /* 定义一个类组件,继承于 React.Component , 至少有 render 方法 */
    class App extends React.Component {
    
      render() {
        return (
          <HashRouter>
    
            <Link to="/page01">跳转到页面一</Link>
            <br />
            <Link to="/page02">跳转到页面二</Link>
            <br />
            <Link to="/page03">跳转到页面三</Link>
    
            <Switch>
              <Route exact path="/page01" component={Page01} />
              <Route path="/page02" component={Page02} />
              <Route path="/page03" component={Page03} />
    
              {/* 定义重定向,写在倒数第二位 */}
              <Redirect exact from="/" to="page01" />
    
              {/* 定义404页面的路由,写在最下面 */}
              <Route component={NotFound} />
            </Switch >
    
          </HashRouter>
        )
      }
    }
    
    ReactDOM.render(<App />, document.getElementById('root'));
    

    页面样式:
    页面样式
    跳舞

    路由传参

    语法:

    • 定义Link标签:
    <li><a href="#/page03/detail/1001">新闻标题一</a></li>
    // 等同于:
    <li><Link to="/page03/detail/1001">新闻标题一</Link></li>
    
    • 定义Route标签:
    <Route path="/path03/detail/:newsid" component={ Detail } />
    
    • 组件中获取参数的方式:
    // 使用props属性获取传递过来的参数:
    function() Detail(props){
    	// 通过 props.match.params.newsid 来接收传递的参数
    	return <p>这是新闻的详细页面,新闻的ID{ props.match.params.newsid }</p>
    }
    

    例🌰子:

    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    
    import { HashRouter, Route, Link, Switch, Redirect } from 'react-router-dom';
    
    function Page01() {
      return <h1>页面一</h1>
    }
    
    function Page02() {
      return <h1>页面二</h1>
    }
    
    function Page03() {
      return (
        <ul>
          <li><Link to="/page03/detail/1001">新闻标题一</Link></li>
          <li><Link to="/page03/detail/1002">新闻标题二</Link></li>
          <li><Link to="/page03/detail/1003">新闻标题三</Link></li>
        </ul>
      )
    }
    
    // 定义新闻详情页对应的
    function Detail(props) {
      return <p>这是新闻详情页面,新闻的id值是:{props.match.params.newsid}</p>
    }
    
    function NotFound() {
      return <h1>404页面</h1>
    }
    
    /* 定义一个类组件,继承于 React.Component , 至少有 render 方法 */
    class App extends React.Component {
    
      render() {
        return (
          <HashRouter>
    
            <Link to="/page01">跳转到页面一</Link>
            <br />
            <Link to="/page02">跳转到页面二</Link>
            <br />
            <Link to="/page03">跳转到页面三</Link>
    
            <Switch>
              <Route exact path="/page01" component={Page01} />
              <Route path="/page02" component={Page02} />
              <Route path="/page03" component={Page03} />
              <Route path="/page03/detail:newsid" component={Detail} />
    
              {/* 定义重定向,写在倒数第二位 */}
              <Redirect exact from="/" to="page01" />
    
              {/* 定义404页面的路由,写在最下面 */}
              <Route component={NotFound} />
            </Switch >
    
          </HashRouter>
        )
      }
    }
    
    ReactDOM.render(<App />, document.getElementById('root'));
    

    页面样式:
    页面样式
    跳舞

    自定义路由

    作用: 页面导航菜单的样式、路由相互联动。有点像排他思想。
    语法:(固定结构)

    /**
    * @description:自定义路由
    * @param {type} label 路由的文字
    * @param {type} to 路由
    * @param {type} exact 传入的布尔值
    * @return: Route
    */
    function CustomLink({ label, to, exact }) {
        return (<Route
            path={ to }
            exact={ exact }
            // match 参数是系统传入的,是一个 bool,匹配当前路由,则 true;不匹配当前路由,则 false。
            children={({ match }) => (
                <Link to={ to } className={ match ? 'active' : '' }>{ label }</Link>
            )}
        />)
    }
    

    例🌰子:
    src/main.css文件:

    .active {
        color: red;
        position: relative;
    }
    
    .active::before {
        content: '<';
        position: absolute;
        left: 20px;
        top: 14px;
        transform: rotate(90deg);
    }
    

    src/index.js 文件:

    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    
    import './main.css';
    
    // 导入路由相关的组件
    import { HashRouter, Route, Link, Switch, Redirect } from 'react-router-dom';
    
    // 定义路由切换的组件
    function Page01() {
      return <h1>页面内容一</h1>
    }
    
    function Page02() {
      return <h1>页面内容二</h1>
    }
    
    function Page03() {
      return (
        <ul>
          <li><Link to="/page03/detail/1001">新闻标题一</Link></li>
          <li><Link to="/page03/detail/1002">新闻标题二</Link></li>
          <li><Link to="/page03/detail/1003">新闻标题三</Link></li>
        </ul>
      )
    }
    
    // 定义新闻详情页对应的
    function Detail(props) {
      return <p>这是新闻详情页面,新闻的id值是:{props.match.params.newsid}</p>
    }
    
    // 定义一个404页面组件
    function NotFound() {
      return <h2>亲!你要的页面未找到!</h2>
    }
    
    class App extends Component {
      render() {
        return (
          <HashRouter>
    
            <CustomLink label="页面一" to="/page01" />
            <CustomLink label="页面二" to="/page02" />
            <CustomLink label="页面三" to="/page03" exact={true} />
    
            <Switch>
              <Route path="/page01" component={Page01} />
              <Route path="/page02" component={Page02} />
              <Route exact path="/page03" component={Page03} />
              <Route path="/page03/detail/:newsid" component={Detail} />
    
              {/* 定义重定向,它要定义在倒手第二的位置 */}
              <Redirect exact from="/" to="/page01" />
    
              {/* 定义404页面对应的路由,这个路由要写到最下面 */}
              <Route component={NotFound} />
            </Switch>
    
          </HashRouter>
        )
      }
    }
    
    
    /**
    * @description:自定义路由
    * @param {type} label 路由的文字
    * @param {type} to 路由
    * @param {type} exact 传入的布尔值
    * @return: Route
    */
    function CustomLink({ label, to, exact }) {
      return <Route
        path={to}
        exact={exact}
        children={({ match }) => (
          <Link to={to} className={match ? 'active' : ''}>{label}</Link>
        )}
      />
    }
    
    ReactDOM.render(<App />, document.getElementById('root'));
    

    页面样式:
    页面样式

    子路由

    react 路由是直接卸载组件中的,所以子路由就可以直接写在跳转的组件中就可以了,这个时候可以不写 HashRouter容器。
    有时候,我们还需要在逻辑代码中跳转路由,这个叫编程式导航,跳转的方式如下:

    this.props.history.push('/layout');
    

    例🌰子:

    src/index.js:

    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    
    import './main.css';
    
    // 导入路由相关的组件
    import { HashRouter, Route, Link } from 'react-router-dom';
    
    //制作后台登录页组件
    function Login(props) {
        return (
            <form>
                <h2>用户登录</h2>
                <p>
                    <label>用户名:</label>
                    <input type="text" />
                </p>
                <p>
                    <label>&nbsp;&nbsp;&nbsp;码:</label>
                    <input type="password" />
                </p>
                <p>
                    <input type="button" value="登录" onClick={() => props.history.push('/layout')} />
                </p>
            </form>
        )
    }
    
    // 定义右侧内容对应的组件
    function Content01() {
        return <h2>右侧内容一</h2>
    }
    
    function Content02() {
        return <h2>右侧内容二</h2>
    }
    
    function Content03() {
        return <h2>右侧内容三</h2>
    }
    
    
    // 后台首页组件
    function Layout() {
        return (
            <div>
                <div className="menu">
                    <Link to="/layout">菜单一</Link><br /><br />
                    <Link to="/layout/con02">菜单二</Link><br /><br />
                    <Link to="/layout/con03">菜单三</Link>
                </div>
                <div className="content">
                    <Route exact path="/layout" component={Content01} />
                    <Route path="/layout/con02" component={Content02} />
                    <Route path="/layout/con03" component={Content03} />
                </div>
            </div>
        )
    }
    
    class App extends Component {
        render() {
            return (
                <HashRouter>
                    <Route exact path="/" component={Login} />
                    <Route path="/layout" component={Layout} />
                </HashRouter>
            )
        }
    }
    
    ReactDOM.render(<App />, document.getElementById('root'));
    

    src/main.css:

    a {text-decoration: none;color: #333;}
    
    a:hover {color: red;}
    
    .active {color: red;position: relative;}
    
    .active::before {content: '<';position: absolute;left: 20px;top: 13px;transform: rotate(90deg);}
    
    .menu {position: fixed;left: 0;top: 0;bottom: 0;width: 240px;background-color: #f80;box-sizing: border-box;padding: 20px;}
    
    .content {position: fixed;left: 240px;top: 0;bottom: 0;right: 0;background-color: lightblue;}
    
    .list_con {width: 600px;margin: 50px auto 0;}
    
    .inputtxt {width: 550px;height: 30px;border: 1px solid #ccc;padding: 0px;text-indent: 10px;}
    
    .inputbtn {width: 40px;height: 32px;padding: 0px;border: 1px solid #ccc;}
    
    .list {margin: 0;padding: 0;list-style: none;margin-top: 20px;}
    
    .list li {height: 40px;line-height: 40px;border-bottom: 1px solid #ccc;}
    
    .list li span {float: left;}
    
    .list li b {float: right;text-decoration: none;margin: 0 10px;font-weight: normal;cursor: pointer;}
    

    开心

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,785
精华内容 3,514
关键字:

react路由