React-Router 4.0基础详解

最新推荐文章于 2024-06-29 00:40:39 发布

Mr_Darry

最新推荐文章于 2024-06-29 00:40:39 发布

阅读量1.4k

点赞数

分类专栏： react-js react-router 文章标签： react react-router

本文链接：https://blog.csdn.net/Mr_Dave/article/details/79028983

版权

react-js 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

react-router

1 篇文章 0 订阅

订阅专栏

一、React-Router环境搭建
1、react 环境搭建
参考：我的上一篇博文
2、导入react router依赖包
npm install react-router-dom - -save-dev
二、React-Router基础用例
1文件简介
public
bundle.js —-打包生成文件(输出文件)
index.html—-入口布局文件
component—组件
About.js—-about组件
App.js—app组件
Repos—repos组件
index.js—-入口文件
index.html—-输出布局文件(网页入口)

2、源代码
**public
index.html**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel" src = "../src/index.js"></script>
  <script src="bundle.js"></script>
</body>
</html>

about.js

import React from 'react'
class About extends React.Component{
  render() {
    return <div>This is About page</div>
  }
}
export default About;

App.js

import React from 'react'
class App extends React.Component{
  render() {
    return (
      <div>
        This is App page; 
      </div>
    )
  }
}
export default App;

Repos.js

import React from 'react'

class Repos extends React.Component{
  render() {
    return <div>Thi is Repos page</div>
  }
}
export default Repos;

index.js

import React from 'react'
import {render} from 'react-dom'
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
import App from './component/App'
import About from './component/About'
import Repos from './component/Repos'

render((
    <Router>
        <ul>
            <li><Link to="/">App</Link></li>
            <li><Link to="/repos">Repos</Link></li>
            <li><Link to="/about">About</Link></li>
            <Route exact path="/" component={App}/>
            <Route path="/repos" component={Repos}/>
            <Route path="/about" component={About}/>
        </ul>
    </Router>
), document.getElementById('app'))

3、打包编译
(1)webpack -p // 打包
(2) webpack-dev-server //开启服务器

三、组件嵌套
1、App.js组件中嵌套其他组件
其他组件不修改

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

class App extends React.Component{
  render() {
    return (
      <div>
        <h1>React Router Tutorial</h1>
        <ul role="nav">
          <li><Link to="/about">About</Link></li>
          <li><Link to="/repos">Repos</Link></li>
        </ul>
      </div>
    )
  }
}
export default App;

2、打包运行
webpack -p
webpack-dev-server
四、组件作为参数传递
1、代码文件结构

2、源代码
(1)、About.js

import React from 'react'

class About extends React.Component{
  render() {
    return <div>About</div>
  }
}
export default About;

(2)、App.js

import React from 'react'
import {Link} from 'react-router-dom'
import NavLink from "./NavLink"

class App extends React.Component{
    render() {
        return (
            <div>
                <h1>React App</h1>
                <ul role="nav">
                    <li><NavLink to="/about">About</NavLink></li>
                    <li><NavLink to="/repos">Repos</NavLink></li>
                </ul>
                {this.props.children}{/*获取父组件所有子属性*/}
            </div>
        )
    }
}
export default App;

(3)、NavLink.js

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

class NavLink extends React.Component{
  render() {
    return <Link {...this.props} activeClassName="active"/>//父组件属性传递
  }
}
export default NavLink;

(4)、Repos.js

import React from 'react'

class Repos extends React.Component{
    render() {
        return <div>Repos</div>
    }
}
export default Repos;

(5)、index.js

import React from 'react'
import {render} from 'react-dom'
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
import App from './component/App'
import About from './component/About'
import Repos from './component/Repos'

render((
    <Router>
        <ul>
            <li><Link to="/">App</Link></li>
            <li><Link to="/repos">Repos</Link></li>
            <li><Link to="/about">About</Link></li>
            <Route exact path="/" component={App}/>
            <Route path="/repos" component={Repos}/>
            <Route path="/about" component={About}/>
        </ul>
    </Router>
), document.getElementById('app'))

(6)运行
webpack -p
webpack-dev-server
五、多层嵌套
1、简介
将Repo组件做为Repos的子组件嵌套，点击Repos链接跳转到Repo中，并将标签名作为参数传递给子组件Repo。
2、源代码
(1)、App.js

import React from 'react'
import NavLink from "./NavLink"

class App extends React.Component{
    render() {
        return (
            <div>
                <h1>React App</h1>
                <ul role="nav">
                    <li><NavLink to="/about">About</NavLink></li>
                    <li><NavLink to="/repos">Repos</NavLink></li>
                </ul>
                {this.props.children}{/*获取父组件所有子属性*/}
            </div>
        )
    }
}
export default App;

(2)、NavLink.js

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

class NavLink extends React.Component{
  render() {
    return <Link {...this.props} className="active"/>//父组件属性传递
  }
}
export default NavLink;

(3)、Repo.js

import React from 'react'

class Repo extends React.Component{
    render() {
        return (
            <div>
                <h2>{this.props.match.params.repoName}</h2>
            </div>
        )
    }
}
export  default Repo;

(4)、Repos.js

import React from 'react'
import {Link} from 'react-router-dom'
class Repos extends React.Component{
    render() {
        return(
            <div>
                <h2>Repos</h2>
                <ul>
                    <li><Link to='/repos/reactjs/react-router'>React Router</Link></li>
                    <li><Link to="/repos/facebook/react">React</Link></li>
                </ul>
            </div>
        )
    }
}
export default Repos;

(5)、About.js

import React from 'react'

class About extends React.Component{
  render() {
    return <div>About</div>
  }
}
export default About;

(6)、index.js

import React from 'react'
import {render} from 'react-dom'
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
import App from './component/App'
import About from './component/About'
import Repos from './component/Repos'
import Repo from './component/Repo'

render((
    <Router>
        <ul>
            <li><Link to="/">App</Link></li>
            <li><Link to="/repos">Repos</Link></li>
            <li><Link to="/repos/:userName/:repoName">Repo</Link></li>
            <li><Link to="/about">About</Link></li>
            <Route exact path="/" component={App}/>
            <Route path="/repos" component={Repos}/>
            <Route path="/repos/:userName/:repoName" component={Repo}/>
            <Route path="/about" component={About}/>
        </ul>
    </Router>
), document.getElementById('app'))

6、通过输入框搜索加载组件
1、源代码
(1)、About.js

import React from 'react'
class About extends React.Component{
    render() {
        return <div>About</div>
    }
}
export default About;

(2).App.js

import React from 'react';  //引入react组件
import  NavLink from './NavLink'
 class App extends React.Component{
    render() {
        return (
            <div>
                <h1>React Router</h1>
                <ul>
                    <li><NavLink to="/about">About</NavLink></li>
                    <li><NavLink to="/repos">Repos</NavLink></li>
                     <Route path="/repos" component={Repos}/>
                     <Route path="/repos/:userName/:repoName" component={Repo}/>
                     <Route path="/about" component={About}/>
                </ul>
                {this.props.children}
            </div>
        )
    }
}
export default App;

(3)NavLink.js

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

class NavLink extends React.Component{
  render() {
    return <Link {...this.props} className="active"/>
  }
}
export default NavLink;

(4).Repo.js

import React from 'react'

class Repo extends React.Component{
  render() {
      const { userName, repoName } = this.props.match.params
      return (
          <div>
              <h2>{userName} / {repoName}</h2>
          </div>
      )
  }
}
export default Repo;

(5).Repos.js

import React from 'react'
import {withRouter} from 'react-router-dom';//按需加载组件，v4.0新功能
import NavLink from './NavLink'
class Repos extends React.Component {
    constructor(props,context){
        super(props,context);
        this.context.router;
        console.log("context",this.context)
    };
    handleSubmit(event) {
        event.preventDefault();
        const userName=event.target.elements[0].value;
        const repo=event.target.elements[1].value;
        const path=`/repos/${userName}/${repo}`;
        this.props.history.push(path);//contextTypes已经过期
    }

    render() {
        return (
            <div>
                <h2>Repos</h2>
                <ul>
                    <li><NavLink to="/repos/reactjs/react-router">React Router</NavLink></li>
                    <li><NavLink to="/repos/facebook/react">React</NavLink></li>
                    <li>
                        <form onSubmit={this.handleSubmit.bind(this)}>
                            <input type="text" placeholder='userName'/>{''}
                            <input type="text" placeholder='repo'/>{''}
                            <button type="submit">Go</button>
                        </form>
                    </li>
                </ul>
                {this.props.children}
            </div>
        )
    };
}
export default withRouter(Repos);//withRouter包装任何自定义组件，将react-router 的 history,location,match 三个对象传入

(6).index.js

import React from 'react';
import {render} from 'react-dom';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import About from './component/About'
import App from './component/App'
import Repos from './component/Repos'
import Repo from './component/Repo'
render((
    <Router>
        <div>
            <ul>
                <li><Link to="/about">About</Link></li>
                <li><Link to="/repos">Repos</Link></li>
                <li><Link to="/repos/:userName/:repoName">Repo</Link></li>
            </ul>
            <hr/>
            <Route path="/" component={App}/>
            <Route path="/repos" component={Repos}/>
            <Route path="/about" component={About}/>
            <Route path="/repos/:userName/:repoName" component={Repo}/>
        </div>
    </Router>
), document.getElementById('app'))

Mr_Darry

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React-Router 4.0基础详解

一、React-Router环境搭建 1、react 环境搭建参考：我的上一篇博文 2、导入react router依赖包 npm install react-router-dom - -save-dev 二、React-Router基础用例 1文件简介 public bundle.js —-打包生成文件(输出文件) index.ht
复制链接

扫一扫

专栏目录