React路由介绍

React路由

1什么是 React 路由？

路由是过管理 URL，实现组件的切换与状态的变化或者说是视图的导航。

2安装路由

在使用路由前需要先安装路由
首先进入项目目录
安装路由的指令

npm install  react-router-dom -S

3路由的使用

使用路由时，我们需要将其引入的到我们的代码中
{}里的内容是我们需要的内置组件

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

Link与a标签的的功能相似，只是允许用户点击后，进行跳转

Route当用户点击过后，用来决定我们需要跳转到指定路由，

3-1路由的跳转

一个简单跳转的案例
index.js主文件代码

import React from 'react'
import ReactDOM from 'react-dom'
import App from './APP'
ReactDOM.render(<App />, document.getElementById('root'));

App.js代码

import React from 'react';
import {HashRouter,Route,Link} from 'react-router-dom';
import Home from './compoents/Home';
//将Homs.js和Music.js导入进来
import Music from './compoents/Music';
class App extends React.Component{
    render(){
        return(
        //HashRouter表示一个路由的根容器，将来所有的路由相关的东西，都要包裹在HashRouter里面
        <HashRouter>
        <div>这是根目录</div>
        <hr />
        {/* 链接*/}
         <Link to="/home">首页</Link>
         <Link to="/music">音乐</Link>
         {/* 路由规则*/}
         <Route path="/home" component={Home}></Route>
         <Route path="/music" component={Music}></Route>
        </HashRouter>
         
        )
    }
}
export default App;

Home.js代码

import React from 'react'

class Home extends React.Component{
    render(){
        return(
            <div>
                <p>浅笑</p>
            </div>
        )
    }
}
export default Home;

Music.js代码

import React from 'react'

class Music extends React.Component{
    render(){
        return(
            <div>
                <p>乐器</p>
            </div>
        )
    }
}
export default Music;

这样就实现了一个简单的路由跳转

3-2路由传值

App.js代码

import React from 'react';
import {HashRouter,Route,Link} from 'react-router-dom';
import Home from './compoents/Home';
//将Homs.js和Music.js导入进来
import Music from './compoents/Music';
class App extends React.Component{
    render(){
        return(
        //HashRouter表示一个路由的根容器，将来所有的路由相关的东西，都要包裹在HashRouter里面
        <HashRouter>
        <div>这是根目录</div>
        <hr />
        {/* 链接*/}
         <Link to="/home">首页</Link>
         <Link to="/music/top/10">音乐</Link>
         {/* 路由规则*/}
         <Route path="/home" component={Home}></Route>
       	 <Route path="/music/:type/:id" component={Musice} exact></Route>
        </HashRouter>
         
        )
    }
}
export default App;

Music.js代码

import React from 'react'
import {Link,Route} from 'react-router-dom';
class Musice extends React.Component{
    constructor(props){
        super(props);
         this.state={
         //用来简单化代码
             msg:props.match.params
             //match包含了具体的 url 信息，在 params 字段中可以获取到各个路由参数的值。
          
      }
     }
    render(){
        return(
            <div>
                音乐--
                {this.state.msg.type}--
                {this.state.msg.id}
            </div>
            
        )
    }
}
export default Musice;

这样就实现了一个简单的路由传值

3-3嵌套路由

在写嵌套路由时需要注意路由的路径
Music.js代码

import React from 'react'
import {Link,Route} from 'react-router-dom';
import Yy from './news/Yinyue'//将Yinyue.js导入进来
class Music extends React.Component{
    render(){
        return(
            <div>
                音乐
                <ul>
                    <li>
                        <Link to='/musice/yinyue'>乐器</Link>
                    </li>
                </ul>
                <Route path='/musice/yinyue' component={Yy}></Route>
            </div>
        )
    }
}
export default Music;

Yinyue.js代码

import React from 'react';

class  Yinyue extends React.Component{
    render(){
        return (
            <div>
                <ul>
                    <li>吉他</li>
                    <li>钢琴</li>
                </ul>
            </div>
        )
    }
}
export default Yinyue;

App.js代码

import React from 'react';
import {HashRouter,Route,Link} from 'react-router-dom';
import Home from './Home';
import Musice from './Musice';

class App extends React.Component{
    render(){
        return(
            <HashRouter>
                <div>
                    <Link to="/home">首页</Link>&nbsp;&nbsp;
                    <Link to="/musice">音乐</Link>&nbsp;&nbsp;
                    <hr />
                    <Route path="/home" component={Home}></Route>
                    <Route path="/musice" component={Musice}></Route>
                </div>
            </HashRouter>
        )
    }
}
export default App;

点击乐器，会出现第二张图的效果，


仅个人整理，如有不足，还请补充