React HashLink - 不变失败:你不应该在 <Router> 之外使用 <Link>

时间:2021-06-24 09:55:52

标签: reactjs react-router-dom

我正在使用 React Router Hash Link 导航到某个 #hash-fragment。

当我使用组件时,我没有收到任何错误,但如果我用 替换,它返回 Invariant failed: You should not use <Link> outside a <Router>

我正在使用Meterial UI 框架。我的代码如下所示:

\components\App.tsx

import React, { useEffect, useState } from "react";
import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom";
import { Header } from "./header/header";


export const App = () => {


  return (

        <BrowserRouter>
              <Header profile={profile}></Header>
              <Switch>
                <Route exact path="/" component={LandingPage} />
                <Route
                  path="/overview"
                  component={Overview}
                />
                <Route
                  path="/info"
                  component={InfoPage}
                />
                <Route render={() => <Redirect to="/" />} />
              </Switch>
        </BrowserRouter>

  );
};

\components\header\header.tsx

export const Header: React.FC<BasicProps> = ({ profile }) => {
  
  return (
      <AppBar position="sticky">
        <Toolbar>
            <div>
              <IconButton
                onClick={handleClick}
                color="secondary"
              >
                <InfoIcon />
              </IconButton>
              <Menu
                id="InfoButton"
                anchorEl={anchorEl}
                keepMounted
                open={Boolean(anchorEl)}
                onClose={handleAnchorClose}
              >
                <HashLink to="/info">
                    <MenuItem >
                    First Item
                    </MenuItem>
                </HashLink> 
                <MenuItem>
                  Second Item
                </MenuItem>
                <MenuItem>
                  <a href="/info#header-three">
                    Third Item
                  </a>
                </MenuItem>
              </Menu>
            </div>
        </Toolbar>
      </AppBar>
  );
};

知道为什么会抛出 Invariant failed: You should not use <Link> outside a <Router> 错误吗?

0 个答案:

没有答案