react路由

react 路由

一、 react路由的基本使用

• 安装react-router-dom，在入口文件index.js中引入HasRouter组件，并将要使用的到路由的组件进行包裹
• 在子组件中引入Link，Route
• Link用来配置路由的跳转路径
  • to属性设置跳转的路由地址
  
  
• Route用来设置展示的组件
  • component用于设置匹配的路径展示的组件
  • path设置匹配的路径
  • exact 属性用于让Router中的path与Link中的to完全匹配

• Switch标签的作用是将包裹在其中的Router中path重复的进行剔除，只留下唯一的Router
  • 包裹的必须直接是route标签的元素

// app.js

import Nav from './components/Nav'
import Home from './components/Home'
import {Link, Route} from 'react-router-dom'

function App() {
  return (
    <div>
      根组件
      <div>
        <p><Link to='/home'>home</Link></p>
        <p><Link to='/nav'>nav</Link></p>
      </div>
      <div>
        <p><Route exact component={Home} path='/home'></Route></p>
        <p><Route exact component={Nav} path='/nav'></Route></p>
      </div>
      <hr />
      <div>
        <Switch>
          <Route exact component={Home} path='/home'></Route>
          <Route exact component={Home} path='/'></Route>
          <Route exact component={Nav} path='/nav'></Route>
          <Route exact component={Nav} path='/nav'></Route>
          <Route exact component={Nav} path='/nav'></Route>
        </Switch>
      </div>
    </div>
  );
}

export default App;
// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {HashRouter} from 'react-router-dom'

ReactDOM.render(
  <React.StrictMode>
    <HashRouter><App /></HashRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

路由入门小案例

当前存在Home、About两个组件，我们希望在页面上的导航栏中实现点击对应标签，即可在页面上显示对应组件的内容。

Home组件：

import React, { Component } from 'react'
export default class Home extends Component {
    render() {
        return (
            <h3>我是Home的内容</h3>
        )
    }
}

About组件：

import React, { Component } from 'react'
export default class About extends Component {
    render() {
        return (
            <h3>我是About的内容</h3>
        )
    }
}

App组件

省略import...

export default class App extends Component {
    render() {
        return (
            <div>
                <div class="row">
                    <div class="col-xs-offset-2 col-xs-8">
                        <div class="page-header"><h2>React Router Demo</h2></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-2 col-xs-offset-2">
                        <div class="list-group">
                            <a class="list-group-item" to='/about'>About</a>
                            <a class="list-group-item" to='/home'>Home</a>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="panel">
                            <div class="panel-body">
                              
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

步骤一：下载路由组件库

install i react-router-dom

步骤二：引用Link标签，替代<a>标签进行跳转：

需要注意的是<Link>其实本质上也是<a>标签，只是说它阻止了a标签默认的跳转动作，但保留了其修改浏览器URL路径的能力。

import {Link,Router, Route} from 'react-router-dom'
...
export default class App extends Component {
    render() {
        return (
            <div>
                <div class="row">
                    <div class="col-xs-offset-2 col-xs-8">
                        <div class="page-header"><h2>React Router Demo</h2></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-2 col-xs-offset-2">
                        <div class="list-group">
                            {/* 
                            使用Link标签代替 a 标签，这一步是用于实现第一步：浏览器URL的变更
                            */}
                            <Link class="list-group-item" to='/about'>About</Link>
                            <Link class="list-group-item" to='/home'>Home</Link>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="panel">
                            <div class="panel-body">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

步骤三：定义路由对应要跳转的组件：

这一步也比较好理解，前端路由器(会在步骤四配置)会自动检测到浏览器的url发生了变化，此时就会拿新的url地址到路由表中进行匹配，步骤三定义的就是和url匹配成功的路由，将显示对应哪个组件。

import {Link,Router, Route} from 'react-router-dom';

export default class App extends Component {
    render() {
        return (
            <div>
                <div class="row">
                    <div class="col-xs-offset-2 col-xs-8">
                        <div class="page-header"><h2>React Router Demo</h2></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-2 col-xs-offset-2">
                        <div class="list-group">
                            {/* 
                            使用Link标签代替 a 标签，这一步是用于实现第一步：浏览器URL的变更
                            */}
                            <Link class="list-group-item" to='/about'>About</Link>
                            <Link class="list-group-item" to='/home'>Home</Link>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="panel">
                            <div class="panel-body">
                                {/* 
                                在App.js中，定义路由，路由规定了path对应跳转的组件
                                */}
                                <Route path="/about" component={About}/>
                                <Route path="/home" component={Home}/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

步骤四：在最外层的index.js中配置前端路由器

这里可以使用Router组件，但我们一般是使用功能更为强大的BrowerRouter或者HashRouter。

import React from 'react'
import ReactDOM from 'react-dom'
// 注意，我们一般不直接引入Router，而是引入 BrowserRouter 或者 HashRouter
import {BrowserRouter} from 'react-router-dom'
import App from './App'

ReactDOM.render(<BrowserRouter><App/></BrowserRouter>,document.getElementById('root'))

.路由组件与一般组件
import React, { Component } from 'react';
import { Link,Route } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'
import Header from './components/Header'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap'
export default class App extends Component {
    render() {
        return (
            <div>
                <div className="row">
                    <div className="col-xs-offset-2 col-xs-8">
                        <Header a={1}></Header> {/* 一般组件写法 */}
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-2 col-xs-offset-2">
                        <div className="list-group">
                            {/* 原生html 要靠<a>跳转不同的页面 */}
                            {/* <a className="list-group-item" href="./about.html">About</a>
                            <a className="list-group-item active" href="./home.html">Home</a> */}

                            {/* 在React中靠路由链接实现切换组件 */}
                            <Link className="list-group-item" to="/home">Home</Link>
                            <Link className="list-group-item" to="/about">About</Link>
                        </div>
                    </div>
                    <div className="col-xs-6">
                        <div className="panel">
                            <div className="panel-body">
                                {/* 注册路由 路由组件写法 */}
                                <Route path="/home" component={Home}/>
                                <Route path="/about" component={About}/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

Header 组件代码
import React, { Component } from 'react'

export default class Header extends Component {
    render() {
        console.log('一般组件',this.props)
        return (
            <div className="page-header"><h2>React Router Demo</h2></div>
        )
    }
}

路由组件与一般组件props接收的数据对比图:

路由组件与一般组件的不同之处
1.写法不同:
    一般组件: <Demo/>
    路由组件: <Route path="/demo" component={Demo}/>
2.存放位置不同:
    一般组件: components
    路由组件: pages
3.接收到的props不同:
    一般组件: 写组件标签时传递了什么，就能收到什么
    路由组件: 接收带三个固定的属性
        history:
            go: ƒ go(n)
            goBack: ƒ goBack()
            goForward: ƒ goForward()
            push: ƒ push(path, state)
            replace: ƒ replace(path, state)
        location: 
            pathname: "/home"
            search: ""
            state: undefined
        match:
            params: {}
            path: "/home"
            url: "/home"