路由指的就是，根据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组件的内部，否则会报错。
页面路由参数的传递
-
动态路由 (路径加反斜杠和参数 例如 /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
这种方式，还需要对值进行处理，比动态路由麻烦。所以尽量用动态路由。
网友评论