useHistory或useNavigate使用即报错处理

useNavigate() may be used only in the context of a <Router> component.

//useNavigate()只能在<Router>组件的上下文中使用。 

解决办法，将使用useNavigate或useHistory的组件和方法封装成一个新的组件，再将其放到Route下即可

思维转变：

Router Hook 和基本的router 组件使用场景不同 多用于函数式组件的业务逻辑 想通以后就不会再受到阻碍

import {  Layout, Menu } from 'antd';
import MenuItem from 'antd/lib/menu/MenuItem';
import React from 'react';
import {BrowserRouter as Router,Routes,Route, Link,useNavigate} from 'react-router-dom';
import './Broadcast.css'
import Channel1 from './Pages/Channel1'
import Channel2 from './Pages/Channel2'
import Channel3 from './Pages/Channel3'

const { Header, Content, Footer } = Layout;

function Broadcast(){
 
  const Gb=()=>{
    return(
      <div>这里是广播站</div>
    )
  }
  return(
<Layout className="layout">
<Router>
    <Header>
      <div className="logo" />
      <Menu
        theme="dark"
        mode="horizontal"
        defaultSelectedKeys={['2']}
        >
          <MenuItem key="1"><Link to="/">广播站</Link></MenuItem>
          <MenuItem key="2"><Link to="/pd1">频道一</Link></MenuItem>
          <MenuItem key="3"><Link to="/pd2">频道二</Link></MenuItem>
          <MenuItem key="4"><Link to="/pd3">频道三</Link></MenuItem>
          <MenuItem key="5"><MyButton/></MenuItem>
        </Menu>
    </Header>
    <Content
      style={{
        padding: '0 50px',
      }}
    >
      <div className="site-layout-content">
        <Routes>
      <Route path="/" exact element={<Gb/>}></Route>
      <Route path="/pd1" element={<Channel1/>}></Route>
      <Route path="/pd2" element={<Channel2/>}></Route>
      <Route path="/pd3" element={<Channel3/>}></Route>
      </Routes>
      </div>
    </Content>
    <Footer
      style={{
        textAlign: 'center',
      }}
    >
      Ant Design ©2018 Created by Ant UED
    </Footer>
    </Router>
  </Layout>
  )
};
function MyButton() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/');
  };
  return <button onClick={handleClick}>Submit</button>;
};
export default Broadcast;

 

import {  Layout, Menu } from 'antd';
import MenuItem from 'antd/lib/menu/MenuItem';
import React from 'react';
import {BrowserRouter as Router,Routes,Route, Link,useNavigate} from 'react-router-dom';
import './Broadcast.css'
import Channel1 from './Pages/Channel1'
import Channel2 from './Pages/Channel2'
import Channel3 from './Pages/Channel3'

const { Header, Content, Footer } = Layout;
function MenuByMyself(){
  let navigate = useNavigate();
  const items=[
  { label: '广播站', key: 'item-1',onClick:()=>{navigate("/")}}, 
  { label: '频道一', key: 'item-2',onClick:()=>{navigate("/pd1")}},
  { label: '频道二', key: 'item-3',onClick:()=>{navigate("/pd2")}}, 
  { label: '频道三', key: 'item-4',onClick:()=>{navigate("/pd3")}}]
  return <Menu
  theme="dark"
  mode="horizontal"
  defaultSelectedKeys={['2']}
  items={items}
  />
}
function Broadcast(){
  

  const Gb=()=>{
    return(
      <div>这里是广播站</div>
    )
  }
  return(
<Layout className="layout">
<Router>
    <Header>
      <div className="logo" />
      {/* <Menu
        theme="dark"
        mode="horizontal"
        defaultSelectedKeys={['2']}
        >
          <MenuItem key="1"><Link to="/">广播站</Link></MenuItem>
          <MenuItem key="2"><Link to="/pd1">频道一</Link></MenuItem>
          <MenuItem key="3"><Link to="/pd2">频道二</Link></MenuItem>
          <MenuItem key="4"><Link to="/pd3">频道三</Link></MenuItem>
          <MenuItem key="5"><MyButton/></MenuItem>
        </Menu> */}
        <MenuByMyself/>
         
    </Header>
    <Content
      style={{
        padding: '0 50px',
      }}
    >
      <div className="site-layout-content">
        <Routes>
      <Route path="/" exact element={<Gb/>}></Route>
      <Route path="/pd1" element={<Channel1/>}></Route>
      <Route path="/pd2" element={<Channel2/>}></Route>
      <Route path="/pd3" element={<Channel3/>}></Route>
      </Routes>
      </div>
    </Content>
    <Footer
      style={{
        textAlign: 'center',
      }}
    >
      Ant Design ©2018 Created by Ant UED
    </Footer>
    </Router>
  </Layout>
  )
};
function MyButton() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/');
  };
  return <button onClick={handleClick}>Submit</button>;
};
export default Broadcast;