React路由器v6.3.0 http：// localhost：3000/https：//example.com/

Question

index.jsx is

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
     <App />
  </BrowserRouter>
 </React.StrictMode>,
);

reportWebVitals();

app.jsx is

import { ThemeProvider } from 'styled-components';
import { lightTheme } from './components/Themes';
import { Route, Routes, useLocation } from 'react-router';
import { About } from './components/About';
import { Main } from './components/Main';
import { Blog } from './components/Blog';
import { Work } from './components/Work';
import { Skill } from './components/Skill';
import { AnimatePresence } from 'framer-motion';
import { Music } from './components/partials/Music';

function App() {
  const location = useLocation();

   return (
<>
  <ThemeProvider theme={lightTheme}>
    <Music />
    <AnimatePresence exitBeforeEnter>
      <Routes location={location} key={location.pathname}>
        <Route path="/" element={<Main />} />
        <Route path="/about" element={<About />} />
        <Route path="/blog" element={<Blog />} />
        <Route path="/work" element={<Work />} />
        <Route path="/skill" element={<Skill />} />
      </Routes>
    </AnimatePresence>
  </ThemeProvider>
</>
  );
 }

export default App;

secialicons.jsx 是

import React from 'react';
import { NavLink } from 'react-router-dom';
import styled from 'styled-components';
import { motion } from 'framer-motion';
import { Facebook, Github, Twitter, YouTube } from '../AllSvgs';
import { DarkTheme } from '../Themes';

export const SocialIcons = (props) => {
  return (
<div className="socialIcon">
  <motion.div
    initial={{ transform: 'scale(0)' }}
    animate={{ scale: [0, 1, 1.5, 1] }}
    transition={{ type: 'spring', duration: 1, delay: 1 }}
  >
    <NavLink
      style={{ color: 'inherit' }}
      target="_blank"
      to={{ pathname: 'https://github.com/faha1999' }}
    >
      <Github
        width={25}
        height={25}
        fill={props.theme === 'dark' ? DarkTheme.text : DarkTheme.body}
      />
    </NavLink>
  </motion.div>

</div>
 );
};

当我单击GitHub图标React React Roureter React React React React Rection Rection Rections将链接重定向到链接，如http：// Localhost：3000/https：//github.com/或 http://example.com/https:/https://github.com/ 通常像IS https://github.com/ 。

我不知道为什么每次此链接都会这样生成。

如何解决这个问题？

Answer 1

您可以将直接标签使用并重定向到以下外部站点，希望这对您有用。通常，我们可以将其重定向到外部站点，我们可以使用标签，并且可以按预期工作。

import React from 'react';
import { NavLink } from 'react-router-dom';
import styled from 'styled-components';
import { motion } from 'framer-motion';
import { Facebook, Github, Twitter, YouTube } from '../AllSvgs';
import { DarkTheme } from '../Themes';

export const SocialIcons = (props) => {
  return (
<div className="socialIcon">
  <motion.div
    initial={{ transform: 'scale(0)' }}
    animate={{ scale: [0, 1, 1.5, 1] }}
    transition={{ type: 'spring', duration: 1, delay: 1 }}
  >
    <a
      style={{ color: 'inherit' }}
      target="_blank"
      href='https://github.com/faha1999'
    > {/* Here I change from NavLing to anchor tag.  */}
      <Github
        width={25}
        height={25}
        fill={props.theme === 'dark' ? DarkTheme.text : DarkTheme.body}
      />
    </a>
  </motion.div>

</div>
 );
};