React 路由

原创已于 2023-02-10 09:31:22 修改 · 129 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js

于 2023-02-06 17:44:06 首次发布

该文章介绍了如何在React项目中安装react-router-dom库，并创建基础页面如Home、Detail、Error。接着，详细展示了如何配置路由，包括定义routerConfig.js文件来管理路由路径及对应的组件，以及在router.js中使用BrowserRouter、Route和Switch进行路由设置。最后，文章说明了在index.js中引入并渲染路由组件的过程。

安装路由

npm install react-router-dom@5.2.0 --save-dev

创建基础页面

Home、Ddetail、Error页面等

如Error.js

import React, { Component } from 'react'
export default class Error extends Component{
    render(){
        return(<div>
                404
            </div>)
    }
}

路由配置

可以创建一个 routerConfig.js 的文件，专门用来做路由配置：

routerConfig.js：

import Home from './Home'
import List from './List'
import Error from './Error'


const routerConfig = [
    {pathname: "/home", component: Home, exact: true},
    {pathname: "/list", component: List, exact: true},
    {pathname: "*", component: Error, exact: false}
]

export default routerConfig

然后引入到 router.js 中，如：

import React, { Component } from 'react'
import { BrowserRouter, Route, Switch} from 'react-router-dom'

import routerConfig from './routerConfig'

export default class BasicRoute extends Component {
    render() {
        return (

            <BrowserRouter>

                <Switch>
                    {routerConfig.map((item, index) => {
                        console.log(item.pathName);
                        return (
                            <Route exact={item.exact} path={item.pathName} component={item.component} key={index} />

                        )
                      }
                    )}
                              
                </Switch>
            </BrowserRouter>
        )
    }
}

在 index.js 中引入：

// 1.引入模块
import React from 'react'
import { createRoot } from 'react-dom/client'
import Router from './router' //引入router
const root = createRoot(document.getElementById('root'));
root.render(

    <div>
        <Router />
    </div>
)