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的标头组件即可。

这是您应如何在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文件夹中创建一个新的目录名称路由器。在其中创建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"));