我正在使用 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>
错误吗?