react配置二级路由

时间:2025-01-22 15:29:09

比如mine组件 login组件  reg组件

mine组件

路由的配置在router中的index里面

import mine from "../views/mine"
 {
        id: 8,
        path: "/mine",
        component: mine
    }

login 组件和reg组件 的路由配置在mine页面中

注意 一定要写 写exact 严格模式 只匹配 “/mine/” 这个路由

import React, { Component } from 'react'
import { HashRouter as Router, Route, Switch } from "react-router-dom"
import login from "./login"
import reg from "./reg"
export default class mine extends Component {
    render() {
        return (
            <div>
                个人页面

               <a href="#/mine/login">登录</a>|
                <a href="#/mine/reg">注册</a>

                <Router>
                    <Switch>
                        <Route path="/mine/" component={login} exact></Route>
                        <Route path="/mine/login" component={login}></Route>
                        <Route path="/mine/reg" component={reg}></Route>
                    </Switch>
                </Router>

            </div>
        )
    }
}