精华内容
下载资源
问答
我要提问

  • 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
    

    在该模块中，我们会经常使用BrowserRouter，HashRouter，Route，Switch，Redirect，Link，NavLink
    

    使用
    

    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 // 刷新页面后数据不会消失
    收起
    展开全文
    reactjs

  • 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... 
    react 路由小结
    

    路由的基本使用
    

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

    

    HashRouter：定义哈希路由整体的容器标签。
    
Link：单个标签，定义路由的链接，通过to属性来定义链接地址。
    
Route：单个标签，定义组件的容器，通过path定义和Link的to属性对应的地址，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;}

    

    开心
    收起
    展开全文
    reactjs

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,785
精华内容 3,514
热门标签
关键字：

react路由