javascript - React-Router-Dom标记正在更改 URL 但未呈现组件

Question

标题组件

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;

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

标签： javascriptreactjsreact-routerreact-router-dom

Answer 1

您不需要标头组件内的路由器...您可以只使用链接，然后在您的 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;