react的路由

路由指的就是，根据url的不同显示不同的内容

react路由使用步骤

• 安装 npm install react-router-dom
• 引入

import { BrowserRouter, Route，Routes} from 'react-router-dom';

• App.js里使用 BrowserRouter

// 表示  <BrowserRouter></BrowserRouter>里的内容，要使用路由了
class App extends Component {
  render(){
    return (
      <Provider store={store}>
        <Header/>
        // BrowserRouter代表路由
        // Route 代表一个一个的路由规则
        <BrowserRouter>
          <Routes>
             // 这里的意思是访问根路由/的时候，展示 home
            <Route path='/' element={<div>home</div>}></Route>
            // 这里的意思是访问/detail的时候，展示detail
            <Route path='/detail' element={<div>detail</div>}></Route>
          </Routes>
        </BrowserRouter>
      </Provider>
    )
  }
}

当然，正常情况下我们不同的路由，展示的肯定不是一个简单的div,而是不同的组件或者说是页面。这个时候，我们怎么办呢？

• 如果我们有不同的页面，比如，首页，详情页等等，那么可以在src目录下创建一个pages文件夹，里边存放不同的页面组件。

  
  image.png
• 然后在App.js里引入要展示的组件

import React ,{Component, Fragment} from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter, Route,Routes} from 'react-router-dom';
import Header from './common/header';
import Home from './pages/home';
import Detail from './pages/detail';
import store from './store';

class App extends Component {
  render(){
    return (
      <Provider store={store}>
        <Header/>
        <BrowserRouter>
          <Routes>
            <Route path='/' element={<Home/>}></Route>
            <Route path='/detail' element={<Detail/>}></Route>
          </Routes>
        </BrowserRouter>
      </Provider>
    )
  }
}

export default App;

单页应用定义是：“整个网站在访问过程中，只加载一次HTML”，而我们如果通过a标签去跳转，每次跳转，都会加载一次HTML，这不符合单页应用的定义，是比较耗费性能的。所以，在react中，我们要借助react-router-dom做单页应用的跳转

// 借助a标签跳转，每次跳转都会加载一次html
{
                    list.map((item,index) => {
                        return (
                            <a key={ index } href="/detail">
                                <ListItem >
                                    <img className="pic" src={ item.get('imgUrl') } alt=""/>
                                    <ListInfo>
                                        <h3 className='title'>{ item.get('title') }</h3>
                                        <p className='desc'>{ item.get('desc') }</p>
                                    </ListInfo>
                                </ListItem>
                            </a>
                        )
                    })
                }

• 需要先引入 Link to属性控制跳转路由

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

<Link key={ index } to="/detail">
<ListItem >
    <img className="pic" src={ item.get('imgUrl') } alt=""/>
    <ListInfo>
          <h3 className='title'>{ item.get('title') }</h3>
          <p className='desc'>{ item.get('desc') }</p>
    </ListInfo>
</ListItem>
</Link>

• 需要注意：使用Link的组件，需要在BrowserRouter组件的内部，否则会报错。

页面路由参数的传递

• 1. 动态路由 (路径加反斜杠和参数 例如 /detail/2)

     
     image.png

// 如果从列表进入详情，那么一般情况下需要把item的id传给接口，路由上也要id匹配
                            <Link key={ index } to={'/detail/' + item.get('id')}>
                                <ListItem >
                                    <img className="pic" src={ item.get('imgUrl') } alt=""/>
                                    <ListInfo>
                                        <h3 className='title'>{ item.get('title') }</h3>
                                        <p className='desc'>{ item.get('desc') }</p>
                                    </ListInfo>
                                </ListItem>
                            </Link>

• 还需要在Route的path属性配合，'/detail/:id',否则路由匹配不上

 <BrowserRouter>
          <Header/>
          <Routes>
            <Route path='/' element={<Home/>}></Route>
            <Route path='/detail/:id' element={<Detail/>}></Route>
          </Routes>
        </BrowserRouter>

• 动态路由获取参数的方式

import { useParams } from 'react-router-dom';

// useParams ()  获取到路由的动态参数  {id:2}
const Detail = (props) => {
    props.getDetail(useParams().id);
    return (
        <DetailWrapper>
            <Header>
                {props.title}
            </Header>
            <Content dangerouslySetInnerHTML={{__html:props.content}} />
        </DetailWrapper>
    )
}

• 另外一种方式就是通过?参数的方式来传参

// detail 后边 直接 跟 ?id=xx
<Link key={ index } to={'/detail?id=' + item.get('id')}>
            <ListItem >
                <img className="pic" src={ item.get('imgUrl') } alt=""/>
                <ListInfo>
                   <h3 className='title'>{ item.get('title') }</h3>
                   <p className='desc'>{ item.get('desc') }</p>
                </ListInfo>
            </ListItem>
 </Link>

• 同时路由需要改变一下

      // /detail 就可以了
        <BrowserRouter>
          <Header/>
          <Routes>
            <Route path='/' element={<Home/>}></Route>
            <Route path='/detail' element={<Detail/>}></Route>
          </Routes>
        </BrowserRouter>

• 获取参数 通过 useLocation 方法

import { useParams,useLocation } from 'react-router-dom';
const Detail = (props) => {
    console.log(useLocation().search)
    // props.getDetail(useParams().id);
    return (
        <DetailWrapper>
            <Header>
                {props.title}
            </Header>
            <Content dangerouslySetInnerHTML={{__html:props.content}} />
        </DetailWrapper>
    )
}

image.png

这种方式，还需要对值进行处理，比动态路由麻烦。所以尽量用动态路由。