REACT_react路由配置

向右看齐 2022-10-11 00:56 194阅读 0赞

# 路由配置 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]

**BrowserRouter**：history路由  
**HashRouter**：hash路由  
**Router**：的history是必需的props  
**Switch**：表示只渲染第一个与当前地址匹配的  
**Prompt**：防止转换 `<Prompt shen={true} message="确定离开此页面？" ></Prompt>`  
**Route 渲染组件的方式**

*  Route的props path为路径，component为路径对应的页面，Route 是 React Router中用于配置路由信息的组件，每当有一个组件需要根据 URL 决定是否渲染时，就需要创建一个 Route
 *  component 的值是一个组件，当 URL 和 Route 匹配时，Component属性定义的组件就会被渲染
 *  exact 属性表示精确匹配

安装路由

npm install react-router-dom --save

创建路由文件  
/src/router/index.js

//导入组件Index,Page1 //需要自己先创建好组件
    import Index from '../pages/index/index';
    import Page1 from '../pages/page1/index';
    import PageNotFound from '../pages/PageNotFound/index';
    import React,{ Component} from 'react';
    import {  
        HashRouter as Router,    //BrowserRouter(history路由) HashRouter(hash路由)
        Switch,
        Route,
        Link,
        Redirect
    } from "react-router-dom";
    import {  createHashHistory } from "history";
    const history = createHashHistory();
    let routes = [
        { 
            path: "/",
            component: Index,
            exact: true,
        },
        { 
            path: "/page1",
            component: Page1,
            exact: true,
        },
        { 
            path: "/404",
            component: PageNotFound,
            exact: true,
        }
    ]
    
    class Routes extends Component { 
        render(){ 
            return (
                <Router history={ history}>
                    <div>
                        <div>
                        	<header>
    	                        <Link to="/">index</Link>|
    	                        <Link to="/page1">page1</Link>
    	                    </header>
    					</div>
                        <Switch>
    	                    { /* 当访问到以/index开头的页面时，走App组件渲染 App页面元素也会显示 配置后需要在app组件中配置以下map渲染的过程 */}
    	                    <Route path="/index" render={ (routeProps)=><App { ...routeProps} />} />
    	                    { 
    	                        routes.map((route,key)=>{ 
    	                            if(route.exact){ 
    	                                return <Route key={ key} exact path={ route.path} component={ route.component} />
    	                            }else{ 
    	                                return <Route key={ key} path={ route.path} component={ route.component} />
    	                            }
    	                        })
    	                    }
    	                    { /* Redirect必须放Switch里的最后一行 如果上面的路由都匹配不到时，跳转到"/"页面（即渲染index组件） */}
    	                    <Redirect from="/*" to="/404" />
    	                </Switch>
                    </div>
                </Router>
            )
        }
    }
    export default Routes;

index.js

import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import reportWebVitals from './reportWebVitals';
    
    import RouterConfig from './router/index.js';		//引入路由文件
    
    ReactDOM.render(
    	<React.StrictMode>
    		<RouterConfig />
    	</React.StrictMode>,
    	document.getElementById('root')
    );

创建组件  
例：src/pages/index/index.js

function Index() { 
        return (
          <div className="Index">
            Index
          </div>
        );
    }
    export default Index;

# 跳转路由 #

js跳转路由

this.props.history.push('/login')

标签跳转路由

返回上一页（1）

window.history.back(-1);

返回上一页（2）

// 如果使用hashHistory
    import creatHistory from 'history/createHashHistory'
    //（两个选一个）
    // 如果使用createBrowserHistory
    import creatHistory from 'history/createBrowserHistory'
    
    const history = creatHistory();
    
    history.goBack();

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]: /images/20221005/2302bd3e95ef4a10901dd901883c2f5a.png