react 路由能够更新但页面无法跳转

Question

配置好了路由，以及对应的link，但是在页面中点击相关的区域，路由路径会发生变化，但是页面却无法跳转。

Main.tsx
import { Layout} from 'antd';
import React from 'react';
import 'antd/dist/antd.css';
import '../static/css/Main.css'
import '../components/RIghtBar'
import RightBar from '../components/RIghtBar';
import { Outlet } from 'react-router-dom';

const { Header, Content, Footer} = Layout;

const App: React.FC = () => (
    <div id='Main'>
  <Layout>
  <RightBar/>
    <Layout>
      <Header className="site-layout-sub-header-background" style={{ padding: 0 ,textAlign: 'center'}}  >123456</Header>
      <Content style={{ margin: '24px 16px 0' }}>
        <div className="site-layout-background" style={{ padding: 24, minHeight: 360 ,textAlign:'center'}}>
        <Outlet/>
        </div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
    </Layout>
  </Layout>
  </div>
);
export default App;
侧边栏相关代码
import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons';
import { Layout, Menu } from 'antd';
import React from 'react';
import 'antd/dist/antd.css';
import '../static/css/Main.css'
import { Link} from 'react-router-dom'
const { Sider } = Layout;
const RightBar: React.FC = () => (
  <Sider
    breakpoint="lg"
    collapsedWidth="0"
    onBreakpoint={broken => {
      console.log(broken);
    }}
    onCollapse={(collapsed, type) => {
      console.log(collapsed, type);
    }}
  >
    <div className="logo" />
    <Menu
      theme="dark"
      mode="inline"
    >
      <Menu.Item key='1'><Link to={'/and'}><UserOutlined />查看文章列表</Link></Menu.Item>
      <Menu.Item key='2'><Link to={'/selftable'}><VideoCameraOutlined />文章编辑</Link></Menu.Item>
      <Menu.Item key='3'><UploadOutlined />文章上传</Menu.Item>
    </Menu>
  </Sider>
)
export default RightBar
路由设置
import And from '../Pages/And';
import SelfTable from '../components/selfTable';
import Login from '../Pages/Login';
import React,{Suspense} from 'react';
import {BrowserRouter,Routes,Route} from 'react-router-dom'
import Loading from '../components/Loading'
interface IRouter {
    path:string
    component:React.FC
    children?:IRouter[]
}
const ARouter:IRouter[]=[
    {
        path:'/and',
        component:And
    },
    {

        path:'/selftable',
        component:SelfTable
    },
{
        path:'/login',
        component:Login
    }
]
const MyRouter =() =>(
    <BrowserRouter>
    <Suspense fallback={<Loading/>}>
        <Routes>
            {
              ARouter.map((item,index)=>{
                return(
                item.children ?
                <Route key={index} path={item.path} element={<item.component/>}>
                    {
                        item.children.map((e,i)=><Route key={i} path={e.path} element={<e.component/>}></Route>)
                    }
                </Route>
                : 
                <Route key={index} path={item.path} element={<item.component/>}></Route>
                )
                })      
            }
        </Routes>

    </Suspense>
    </BrowserRouter>
)
export default MyRouter
跳转目标页面
import React from "react";
const And:React.FC =() =>(
        <div>
           lalalalalalala
        </div>

);
export default And;

Answer 1

直接输入 地址能访问吗？访问不了说明 router配置的不太对 。试试编程式导航 router.push .看看行不行 。如果行的话那就市 link写的有问题 .
试试 对象形式

to={{
                        pathname: `/and`,
                        myState: '这是我自定义的变量'
                    }}