react路由配置,路由跳转与传值,路由监听

1.react路由配置

1.1 下载react的路由模块

(默认最新6.3, 如需使用5.x, 在模块名后加@5)

npm install react-router-dom --save     // 6.0
或
npm install react-router-dom@5 --save   // 5.0

1.2 在入口文件 src/index.js中,从路由模块导入工具组件HashRouter ,并包裹根组件

(注: 哈希模式用 HashRouter ，历史模式用 BrowserRouter)

import { HashRouter } from 'react-router-dom'
ReactDOM.render(
    <HashRouter >
        <App />
    </HashRouter >
);

1.3 创建路由文件src/router/index.js, 并从路由模块中导入工具组件Route

• router5.0使用Switch ，router6.0使用Routes

import { Switch, Route } from "react-router-dom";    // 5.0

或

import { Routes, Route } from "react-router-dom";    // 6.0

1.4 创建路由组件，配置路由，并导出

• router6.0 去除了exact, 并把component引入组件构造器改成了element引入组件实例

export default function MyRouter(){     // 5.0
    return(
        <Switch >
            <Route exact path="/" component={Home} />
        </Switch >
    )
}

或

export default function MyRouter(){     // 6.0
    return(
        <Routes >
            <Route