Reactjs 错误：不变量失败：不应使用<；链接>；a<；路由器>，没有导航发生

我正在尝试使用链接组件启用应用程序的客户端渲染。下面是我的组件

/**@jsx jsx */
import { css, jsx } from '@emotion/core';
import { fontFamily, fontSize, gray1, gray2, gray5 } from './../Styles';
import UserIcon from './UserIcon';
import { ChangeEvent } from 'react';
import { Link, BrowserRouter } from 'react-router-dom';

export const Header = () => {
    const handleSearchInputChange = (e: ChangeEvent<HTMLInputElement>) => {
        console.log(e.currentTarget.value);
    };
    return (
        <div
            css={css`
                position: fixed;
                box-sizing: border-box;
                top: 0;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 10px 20px;
                background-color: #fff;
                border-bottom: 1px solid ${gray5};
                box-shadow: 0 3px 7px 0 rgba(110, 112, 114, 0.21);
            `}
        >
            <Link
                to="./"
                css={css`
                    font-size: 24px;
                    font-weight: bold;
                    color: ${gray1};
                    text-decoration: none;
                `}
            >
                Q & A
            </Link>
            <input
                type="text"
                placeholder="Search..."
                css={css`
                    box-sizing: border-box;
                    font-family: ${fontFamily};
                    font-size: ${fontSize};
                    padding: 8px 10px;
                    border: 1px solid ${gray5};
                    border-radius: 3px;
                    color: ${gray2};
                    background-color: white;
                    width: 200px;
                    height: 30px;
                    :focus {
                        outline-color: ${gray5};
                    }
                `}
                onChange={handleSearchInputChange}
            />
            <Link
                to="./signin"
                css={css`
                    font-family: ${fontFamily};
                    font-size: ${fontSize};
                    padding: 5px 10px;
                    background-color: transparent;
                    color: ${gray2};
                    text-decoration: none;
                    cursor: pointer;
                    span {
                        margin-left: 10px;
                    }
                    :focus {
                        outline-color: ${gray5};
                    }
                `}
            >
                <UserIcon />
                <span>Sign In</span>
            </Link>
        </div>
    );
};

现在，当我运行我的应用程序时，我得到的错误是

Error: Invariant failed: You should not use <Link> outside a <Router>
▶ 25 stack frames were collapsed.

错误：不变量失败：不应在
▶ 25个烟囱框架倒塌。

---

当我在Header.tsx中围绕链接组件使用BrowserRouter时，我的应用程序会运行，但当我单击我的链接时，只会更改URL，应用程序会停留在主页上。不确定我在这里遗漏了什么。

使用

链接的标头组件在BrowserRouter组件之外呈现，这就是它抛出错误的原因。您可以将其呈现为BrowserRouter的子级和默认路由，以便它接收路由器道具并能够正确使用
链接

const App = () => (
    <div
        className="App"
        css={css`
            font-family: ${fontFamily};
            font-size: ${fontSize};
            color: ${gray2};
        `}
    >

        <BrowserRouter>
            <Route component={Header} />
            <Switch>
                <Redirect from="/home" to="/" />
                <Route exact path="/" component={HomePage} />
                <Route exact path="/search" component={SearchPage} />
                <Route exact path="/ask" component={AskPage} />
                <Route exact path="/signin" component={SignInPage} />
                <Route component={NotFoundPage} />
            </Switch>
        </BrowserRouter>
    </div>
);
export default App;

const-App=（）=>(
);
导出默认应用程序；
使用
链接的标头组件在BrowserRouter组件外部呈现，这就是它抛出错误的原因。您可以将其呈现为BrowserRouter的子级和默认路由，以便它接收路由器道具并能够正确使用
链接

const App = () => (
    <div
        className="App"
        css={css`
            font-family: ${fontFamily};
            font-size: ${fontSize};
            color: ${gray2};
        `}
    >

        <BrowserRouter>
            <Route component={Header} />
            <Switch>
                <Redirect from="/home" to="/" />
                <Route exact path="/" component={HomePage} />
                <Route exact path="/search" component={SearchPage} />
                <Route exact path="/ask" component={AskPage} />
                <Route exact path="/signin" component={SignInPage} />
                <Route component={NotFoundPage} />
            </Switch>
        </BrowserRouter>
    </div>
);
export default App;

const-App=（）=>(
);
导出默认应用程序；