当用户点击登录时，它应该重定向到反应 js 中的谷歌页面登录你能帮我解决这个问题吗

Question

当用户单击登录按钮时，它将 go 转到登录页面

像这样

我正在为我的投资组合创建这个网站但是我在这里遇到错误是我的登录和 loginwtihgoogle 组件

登录组件

 import React from 'react'

const Login = () => {
  return (
    <>
            <div className='login-icon hover:text-yellow-800'>
                <a href='Loginwithgoogle'>
                <img src="/src/assets/login.png" alt="login icon" className='mt-2 ml-14 h-8 '/>
                <figcaption className='text-white text-center ml-14 text-[9px] hover:text-yellow-800'>LOGIN</figcaption>
                    </a>

             </div>
            
            </>
  )
}

export default Login

这是 loginwithgoogle 组件

   import React from 'react'
import { useEffect } from 'react'
const Loginwithgoogle = () => {

    function handleCallBackResponse(response){
        console.log("Encoded JWT  ID Token " + response.credential);
    }
    useEffect(() => {
     google.accounts.id.initialize({
        client_id: "731249793019-qbik3a0k62db0d3k5vd72j98ivkl2hds.apps.googleusercontent.com",
        callback: handleCallBackResponse
     });
     google.accounts.id.renderButton(
        document.getElementById("signInDiv"),
        { theme: "outline", size:"large"}
     )
    }, [])
    
  return (
    <div className="loginwithgoogle">
        <div id="signInDiv">

        </div>
    </div>
  )
}

export default Loginwithgoogle

这是 main.jsx

  import React from 'react'
import ReactDOM from 'react-dom/client'

import Bar from './components/Bar'
import IconsText from './components/IconsText'

import Searchbar from './components/Searchbar'
import './index.css'
import {BrowserRouter as Router, Routes,Route} from 'react-router-dom'
import Login from './components/Login'


ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
   <Router>
     <Routes>
      <Route path='/loginwithgoogle' element={<Login/>} />
     </Routes>
   </Router>
     <Bar />
    <IconsText />
    <Searchbar/>
    
    
  </React.StrictMode>
)                             

我需要解决这个问题，当有人点击登录时它应该重定向到 loginwthgoogle 页面

Answer 1

您可以在自己的路线上呈现Bar 、 IconsText和Searchbar组件。

ReactDOM.createRoot(document.getElementById('root'))
  .render(
    <React.StrictMode>
      <Router>
       <Routes>
        <Route
          path="/" 
          element={(
            <>
              <Bar />
              <IconsText />
              <Searchbar />
            </>
          )}
        />
        <Route path='/loginwithgoogle' element={<Login />} />
       </Routes>
      </Router>
    </React.StrictMode>
  );

如果你想用其他路由有条件地渲染这些组件，那么创建一个布局路由组件。

例子：

import { Outlet } from 'react-router-dom';

const Layout = () => (
  <>
    <Bar />
    <IconsText />
    <Searchbar />
    <Outlet />
  </>
);

ReactDOM.createRoot(document.getElementById('root'))
  .render(
    <React.StrictMode>
      <Router>
       <Routes>
        <Route element={<Layout />}>
          ... routes with layout ...
        </Route>

        ... routes without layout ...
        <Route path='/loginwithgoogle' element={<Login />} />
       </Routes>
      </Router>
    </React.StrictMode>
  );