React路由配置使用

react-router-dom提供了一对选项用于管理单页面应用中的导航历史记录。

1、路由的配置

1）安装react-router-dom

npm install react-router-dom --save
yarn add react-router-dom -S

2)src下创建pages目录，并创建多个不同页面

示例

import React from 'react' //引入react
export default function Home() {
    return <div > this is Home < /div>
}

2)src下创建router.js，配置路由

import React from 'react'  //引入react
import {BrowserRouter  as Router ,Route,Switch} from 'react-router-dom' //引入集成router 
import App from './pages/app'  
import Login from './pages/login'
import Home from './pages/home'
export default function IRouter(){
    return <Router>
        <Switch>
            <Route exact  path="/" component={App}></Route>
            <Route path="/login" component={Login}></Route>
            <Route path="/home" component={Home}></Route>
        </Switch>
    </Router>
    
}

3)修改src下的index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router'; //导入router
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <Router />  //挂载路由
  </React.StrictMode>,
  document.getElementById('root')
);

2、路由BrowserRouter、HashHistory路由模式

1、BrowserRouter：Url不带有哈希字符(#)，大部分准备上线的网站应用，推荐的此History方案
2、HashHistory：Url带上的哈希字符(#)，用于定义锚点链接

3、Router属性

1、exact：路径和根目录/精确匹配
没有使用Switch示例

没有使用Switch

2、Switch：匹配一个后停止匹配
没有使用exact示例

没有使用exact
3、component:表示路径对应显示的组件
4、path（string）: 路由匹配路径。（没有path属性的Route 总是会 匹配）