React路由配置

前言

路由就是根据不同的url地址访问不同的页面一种映射方式，如果我们学过vue的话，对路由的概念肯定相比较来说就比较熟悉了。
在React中路由就是解决组件到url地址映射关系的一种方案，我们一般都是通过路由插件react-router 或react-router-dom来实现。

react-router和react-router-dom区别？

我们有时候在网上看到路由有的人用react-router，有的人用react-router-dom，那么他们有什么区别呢？

1. react-router只实现了路由的核心功能，react-router-dom是基于react-router的基础上，加入了浏览器运行环境下的一些功能，例如：Link组件，会渲染一个a标签; BrowserRouter和HashRouter组件，前者使用pushState和popState事件构建路由，后者使用window.location.hash和hashchange事件构建路由等。

2. 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 

为了后续使用方便我们单独把路由拆分出去操作

1. src中创建一个router文件夹，创建一个index.js文件
2. src中创建一个pages文件夹，创建一个home.js文件，定义Home组件
3. 我们也可以使用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改善一下

1. 把路由映射关系单独分离出来，定义一个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;

2. 在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;

3. 这样的话，我们后续就不用管jsx代码了，只需要在routes.js中配置好路由就可以直接访问了

Enjoy It !