React-Router-Dom<link> 标签正在更改 URL 但未呈现组件

Question

Header 组件

import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
import { ReactComponent as Logo } from "../../asset/crown.svg";

import "./header.scss";
const Header = () => {
  return (
    <div className='header'>
      <Router>
        <Link exact className='logo-container' to='/'>
          <Logo className='logo' />
        </Link>
        <div className='options'>
          <Link className='option' to='/shop'>
            SHOP
          </Link>
        </div>
      </Router>
    </div>
  );
};

export default Header;

这是我的 header 组件，我在其中使用链接标签，但这些标签正在更改搜索栏中的 URL，但实际上并未渲染组件。

Answer 1

您不需要 Header 组件内的路由器...您可以只使用链接，然后在您的 App.js 中设置到组件的路由。 像这样..

应用程序.Js

 import React from "react"; import { BrowserRouter as Router, Link } from "react-router-dom"; import { ReactComponent as Logo } from "../../asset/crown.svg"; import "./header.scss"; const Header = () => { return ( <div className='header'> <ul> <li className='logo-container'> <Link to='/'> <Logo className='logo' /> </Link> </li> <li> <Link to="/shop"> SHOP </Link> </li> </div> ); }; export default Header; //APP COMPONENT import React from "react"; import { BrowserRouter as Router,Switch, Route } from "react-router-dom"; const App = () => { return ( <Router> <Switch> <Route exact path="/" component="Home"> <Route path="/shop" component="shop"> </Switch> </Router> ); }; export default App;

Answer 2

确保不要在 BrowserRouter 中使用 BrowserRoute。

例如：当你将一个组件放置在一个不是 JSX 的组件中时，它会被转换为 HTML 并可能导致错误。