前言
路由就是根据不同的url地址访问不同的页面一种映射方式，如果我们学过vue的话，对路由的概念肯定相比较来说就比较熟悉了。
在React中路由就是解决组件到url地址映射关系的一种方案，我们一般都是通过路由插件react-router或react-router-dom来实现。
react-router和react-router-dom区别？
我们有时候在网上看到路由有的人用react-router，有的人用react-router-dom，那么他们有什么区别呢？
- react-router只实现了路由的核心功能，react-router-dom是基于react-router的基础上，加入了浏览器运行环境下的一些功能，例如：
Link组件，会渲染一个a标签;BrowserRouter和HashRouter组件，前者使用pushState和popState事件构建路由，后者使用window.location.hash和hashchange事件构建路由等。
- react-router-dom依赖react-router，所以我们使用npm安装依赖的时候，只需要安装相应环境下的库即可，不用再显式安装react-router。npm会自动解析react-router-dom包中package.json的依赖并安装, 在package.json我们会发现它依赖于react-router。
安装配置react-router-dom
安装路由的依赖信息
cnpm i react-router-dom --save
为了后续使用方便我们单独把路由拆分出去操作
- src中创建一个router文件夹，创建一个index.js文件
- src中创建一个pages文件夹，创建一个home.js文件，定义Home组件
- 我们也可以使用NavLink或者Link组件跳转页面，相当于vue中的
routerLink
//导入路由相关组件
import { HashRouter as Router, Route, Switch,Redirect } from 'react-router-dom';
//导入组件
import Home from "../pages/home";
//路由配置文件
function Routes() {
return (
<div>
<Router>
<Switch>
{/* path定义url， component定义组件 */}
<Route path='/home' component={Home}></Route>
{/* //默认重定向跳转的页面信息 */}
<Redirect to="/home" />
</Switch>
</Router>
</div>
)
}
export default Routes;
上面一个一个写太麻烦了，我们可以仿照Vue改善一下
- 把路由映射关系单独分离出来，定义一个routes.js文件
//导入需要配置路由的组件
import Index from "../pages";
import Cart from "../pages/cart";
import Home from "../pages/home";
//路由配置选项效果然后挂载到对应的节点即可
const routes = [
{
path: "/home",
component: Home,
exact: false,
},
{
path: "/cart",
component: Cart,
exact: false,
},{
path: "/index",
component: Index,
exact: false,
}
]
export default routes;
- 在index.js文件中我们引入这个配置好的路由文件，循环遍历即可
//导入路由组件
import { HashRouter as Router, Route, Switch,Redirect } from 'react-router-dom';
import routes from "./routes";
//路由配置文件
function Routes() {
return (
<div>
<Router>
<Switch>
{
routes.map((item,index)=>{
return (
<Route key={index} path={item.path} exact={item.exact} component={item.component}></Route>
)
})
}
{/* <Route path='/cate' component={Cate}></Route> */}
<Redirect to="/home" />
</Switch>
</Router>
</div>
)
}
export default Routes;
- 这样的话，我们后续就不用管jsx代码了，只需要在routes.js中配置好路由就可以直接访问了
Enjoy It !
