React 中的 <Link> 不会转发到新页面

Question

考虑代码：

import React from 'react';
import { Link, BrowserRouter } from 'react-router-dom';
import { ReactComponent as Logo } from '../../assets/crown.svg';
import './header.styles.scss';

const Header = () => (
    <BrowserRouter>

        <div className='header'>
            <Link className='logo-container' to='/'>
                <Logo className='logo' />
            </Link>
            <div className='options'>
                <Link className='option' to='/shop'>
                    SHOP
      </Link>
                <Link className='option' to='/contact'>
                    CONTACT
      </Link>
            </div>
        </div>
    </BrowserRouter>
);

export default Header;

这是我在应用程序中使用的标题。

看起来像这样：

当我点击crown时，URL（在浏览器中）发生了变化，但页面没有变化，它保持在同一页面上。

其他链接 CONTACT 和 SHOP 也会发生同样的情况。

<Link> 标签有什么问题？为什么不转发到链接标签上写的to？

Answer 1

您是否设置了路线？这将在 AppRouter.js 中，例如：

<BrowserRouter>
    <div>
        <Header />
        <Switch>
            <Route path='/' component={Home} exact={true} />
            <Route path='/shop' component={Shop} exact={true }/>
            <Route path='/contact' component={Contact} exact={true} />
            <Route component={ErrorPage} />
        </Switch>
    </div>
</BrowserRouter>

Answer 2

如果您想导航您的用户，请尝试使用 NavLink 或者将 withRouter 添加到组件并推送到其他页面

-- NavLink 解决方案：

import { NavLink, BrowserRouter } from 'react-router-dom';

然后在你的 JSX 中使用它来代替

<NavLink className='logo-container' to='/'>
  <Logo className='logo' />
</NavLink>

--推送解决方案：

import { withRouter , BrowserRouter } from 'react-router-dom';

像这样导出你的组件

export default withRouter(Header);

然后你可以使用任何你想要的标签并监听它们上的事件

<p className='logo-container' onClick = {() => props.history.push('/')}>
  <Logo className='logo' />
</p>

Answer 3

为了导航到不同的组件，您必须定义路由器。所以 react-router-dom 会知道要显示什么。

另一件事是你不能将 BrowserRouter 放在 Header 组件中。组件BrowserRouter 在浏览器中包装历史对象并将其传递到组件树。 BrowserRouter 是一个包装器。标头应放在 BrowserRouter 内，但不要放在此处。只需创建没有 BrowserRouter 的 Header 组件。

这里是你应该如何在 react.js 中正确实现路由

在 src/omponents 文件夹中为路由创建组件。

src/component/shop.js:

import React from "react";

const Shop = () => <div>my shop component</div>; //define your component

export default Shop;

创建所有其他类似的组件，包括 Header 但没有 BrowserRouter。然后在 src 文件夹中创建一个新的目录名称 routers。在其中创建 AppRouter.js

src/routers/AppRouter.js

import { BrowserRouter, Route, Switch } from "react-router-dom";
import React from "react";
import Shop from "../components/Shop";
//import all other routes from components directory.
import Header from "../components/Header"

const AppRouter = () => (
  <BrowserRouter>
    <div>
      <Header />
      <Switch>
        <Route path="/" component={YourHomeComponent} exact={true} />
        <Route path="/contact" component={Contact} />
        <Route path="/shop" component={Shop} />
        <Route component={NotFound} />
      </Switch>
    </div>
  </BrowserRouter>
);
export default AppRouter;
// When react-router sees “Switch” it is going to move through your route definitions in order and it’s going to stop when it finds a match.

终于在 app.js 中

import React from "react";
import ReactDOM from "react-dom";
import AppRouter from "./routers/AppRouter";

ReactDOM.render(<AppRouter />, document.getElementById("app"));