react路由跳转问题（具体路由配置）

Question

目前路由跳转情况

点击 【录入校对】
跳转到

http://localhost:3001/#/exam

是一个单独的路由

但是我想实现的是

请问路由配置要怎么修改

当前router.js配置

import { HashRouter as Router, Route, Switch } from 'react-router-dom';

import React,?{ Component } from 'react';

import Login from "./routes/Login/login";

import Nav from "./routes/Nav/nav";

import Menu from './routes/Menu/Menu'

import Exam from './routes/Exam/Exam'

const routers =?[

 {

 name: '首页菜单',

 path: '/menu',

 component: Menu

 },

 {

 name: '考试',

 path: '/exam',

 component: Exam

 },

];

function IRouter()?{

 return <Router>

 <Switch>

 <Route path="/" exact component={Login}></Route>

 <Route path="/nav" component={Nav}></Route>

 {

 routers.map((item, index) => {

 return (

 <Route key={index} path={item.path} component={item.component}></Route>

 )

 })

 }

 </Switch>

 </Router>

}

export { routers, IRouter };

nav.js

import React, { useState } from 'react';
import { Layout, Menu, Row, Col, Image } from 'antd';
import "./nav.scss";
import logo from '../../assets/images/logo.png';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
import { routers } from '../../router';
import menu from '../Menu/Menu';
import Exam from '../Exam/Exam';

const { Header, Content } = Layout;

export default function Nav() {

    return (
        <Layout>
            <Header className="header">
                <div>
                    <Row>
                        <Col span={12}>这里应该是logo</Col>
                        <Col span={12}>这里应该是用户信息</Col>
                    </Row>
                </div>
            </Header>
            <Layout>
                <Layout style={{ padding: '0 24px 24px' }}>
                    <Content
                        className="site-layout-background"
                        style={{
                            padding: 24,
                            margin: 0,
                            minHeight: '100vh',
                        }}
                    >   <Router>
                            <Switch>
                                {/* <Route path="/nav" component={menu} exact ></Route> */}
                                <Route path="/nav" component={menu} exact ></Route>
                                {/* <Route path="/exam" component={Exam} ></Route> */}
                                {/* {
                                    routers.map((item, index) => {
                                        return (
                                            <Route key={index} path={item.path} component={item.component}></Route>
                                        )
                                    })
                                } */}

                            </Switch>
                        </Router>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    )
}

就想路由变化在这个content里面变化 想了好久 都没有想好 请教一下 应该怎么改

Answer 1

有没有大神给看下啊 想不通