react中配置路由

一個路由就是一個通道，頁面之間的跳轉其實就是路由的切換，所以每個應用的路由配置是必須的，淺談react中怎么配置路由

首先你要在src文件夾下新建一個router的文件下，在router文件下新建一個index.js(我用的是TS,所以是index.tsx)

然后在index.jsx里這樣去配置

import React, { ReactNode, lazy } from "react";
const Test = lazy(() => import("../pages/Test"))
const Detail = lazy(() => import("../pages/Detail"))
//Test 和 Detail分別對應你的組件
export interface IRoute {
    exact?: boolean
    path: string
    title: string
    icon?: ReactNode
    component?: ReactNode
    children?: IRoute[]
}

export const routes: IRoute[] = [
    {
        path: "/test",
        title: "測試一",
        component: <Test />
    },
    {
        path: "/detail",
        title: "詳情",
        component: <Detail />
    }
]

然后再在scr文件下新建一個components文件下，在此文件夾下新建一個View.jsx的文件，里面這樣配置

import React, { Component, Suspense } from 'react'
import { HashRouter as Router, Switch, Route } from 'react-router-dom'
import { routes } from '../router'
export default class View extends Component {
    render() {
        return (
            <>
                <Suspense fallback={<>loading ...</>}>
                    <Router>
                        {routes.map(r => (<Switch key={r.path}>
                            <Route path={r.path}>
                                {r.component}
                            </Route>
                        </Switch>))}
                    </Router>
                </Suspense>

            </>
        )
    }
}

然后你就可以試着改變url地址欄來改變頁面了，注意;hash模式下，你的url前必須加#/

用history來跳轉頁面時必須做好配置，部分代碼如下：

 

import { Link, withRouter, RouteComponentProps } from 'react-router-dom';


class Test extends Component{


}

export default withRouter(Test)

 

這樣才可以使用this.props.history.push等等api