css 如何在React中渲染我的导航栏组件？

b1payxdu  于 2022-12-15  发布在  React
关注(0)|答案(1)|浏览(129)

考虑：

文件 * 应用程序.js*

import './App.css';
import {Link,Route,Routes} from "react-router-dom";
import {Login} from "./login";

function App() {
  return (
    <Routes>
      <Route path="/*" element={<Login />}/>
    </Routes>
  );
}

export default App;

文件 * 索引.js*

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import {RoutPart} from './routPart';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from "react-router-dom";

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

reportWebVitals();

文件 * 路径部件.js*

import {Link,Route,Routes} from "react-router-dom";
import {Home} from "./home";
import {Dashboard} from "./dashboard";

export function RoutPart(props){
    return(
        <>
            <div>
                <Link to="/dashboard">Dashboard</Link>
                <Link to="/home">Home</Link>
            </div>
            <div>
                <Routes>
                    <Route path="/" element={<Dashboard userData={props.userData}/>}/>
                    <Route path="/dashboard" element={<Dashboard/>}/>
                    <Route path="/home" element={<Home/>}/>
                </Routes>
            </div>
            <div>
                <p>hello</p>
            </div>
        </>
    )
}

文件 * 登录名.js*

import axios from "axios";
import { useState } from "react";
import { RoutPart } from "./routPart";
var ReactDOM=require("react-dom");

export function Login(){
    let [id,setUserId]=useState("");
    let [password,setPassword]=useState("");

    let handelSubmit=(e)=>{
        e.preventDefault();
        let url=`http://localhost:8000/login/${id}/${password}`;
        axios.get(url)
        .then((res)=>{
            if(res.data.msg=="No data found !!!!!"){
                console.log("ndf")
            }else{
                ReactDOM.render(<RoutPart data={res.data}/>,document.getElementById("abc"));

            }
        })
        .catch((err)=>{
            console.log(err)
        })
    }

    return(
        <div id="abc">
            <form onSubmit={handelSubmit}>
                <label>Enter your ID:</label>
                <input type="text" name="id" className="form-control" autoComplete="off" placeholder="Enter your ID here....."
                onChange={(e)=>setUserId(e.target.value)}></input>
                <br/>
                <label>Enter your password:</label>
                <input type="password" name="password" className="form-control" autoComplete="off" placeholder="Enter your password here....."
                onChange={(e)=>setPassword(e.target.value)}></input>
                <button name="login">ok</button>
            </form>
        </div>
    )
}

文件 * Jmeter 板.js*

export function Dashboard(props){
    return(
        <div>
            <h1>hiiiiiii</h1>
        </div>
    )
}

文件 home.js

export function Home(){
    return(
        <div>
            <h1>home</h1>
        </div>
    )
}

我是新的React，我想建立一个应用程序，我想在成功登录后呈现导航栏项目。
在登录之前，不会有任何导航栏。为此，我使用“/*”在App.js中的组件中进行路由。当我运行此代码时，它显示登录表单，但当我单击“确定”按钮时，它显示一个空白页面，并且上面的代码给出此错误。如何解决此问题？注意：API正常并提供用户数据;请忽略isLogin操作。

错误

Uncaught Error: useHref() may be used only in the context of a <Router> component.
    at invariant (router.ts:5:1)
    at useHref (hooks.tsx:32:1)
    at LinkWithRef (index.tsx:267:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateForwardRef (react-dom.development.js:19226:1)
    at beginWork (react-dom.development.js:21636:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
invariant @ router.ts:5
useHref @ hooks.tsx:32
LinkWithRef @ index.tsx:267
renderWithHooks @ react-dom.development.js:16305
updateForwardRef @ react-dom.development.js:19226
beginWork @ react-dom.development.js:21636
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
legacyCreateRootFromDOMContainer @ react-dom.development.js:29575
legacyRenderSubtreeIntoContainer @ react-dom.development.js:29601
render @ react-dom.development.js:29685
(anonymous) @ login.js:18
Promise.then (async)
handelSubmit @ login.js:13
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
(anonymous) @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26140
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
router.ts:5 Uncaught Error: useRoutes() may be used only in the context of a <Router> component.
    at invariant (router.ts:5:1)
    at useRoutes (hooks.tsx:270:1)
    at Routes (components.tsx:256:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
invariant @ router.ts:5
useRoutes @ hooks.tsx:270
Routes @ components.tsx:256
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
legacyCreateRootFromDOMContainer @ react-dom.development.js:29575
legacyRenderSubtreeIntoContainer @ react-dom.development.js:29601
render @ react-dom.development.js:29685
(anonymous) @ login.js:18
Promise.then (async)
handelSubmit @ login.js:13
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
(anonymous) @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26140
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
2react-dom.development.js:18687 The above error occurred in the <Link> component:

    at LinkWithRef (http://localhost:3000/static/js/bundle.js:41637:5)
    at div
    at RoutPart (http://localhost:3000/static/js/bundle.js:656:29)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
update.callback @ react-dom.development.js:18720
callCallback @ react-dom.development.js:13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23391
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
legacyCreateRootFromDOMContainer @ react-dom.development.js:29575
legacyRenderSubtreeIntoContainer @ react-dom.development.js:29601
render @ react-dom.development.js:29685
(anonymous) @ login.js:18
Promise.then (async)
handelSubmit @ login.js:13
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
(anonymous) @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26140
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
react-dom.development.js:18687 The above error occurred in the <Routes> component:

    at Routes (http://localhost:3000/static/js/bundle.js:42793:5)
    at div
    at RoutPart (http://localhost:3000/static/js/bundle.js:656:29)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
update.callback @ react-dom.development.js:18720
callCallback @ react-dom.development.js:13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23391
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
legacyCreateRootFromDOMContainer @ react-dom.development.js:29575
legacyRenderSubtreeIntoContainer @ react-dom.development.js:29601
render @ react-dom.development.js:29685
(anonymous) @ login.js:18
Promise.then (async)
handelSubmit @ login.js:13
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
(anonymous) @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26140
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
login.js:23 Error: useHref() may be used only in the context of a <Router> component.
    at invariant (router.ts:5:1)
    at useHref (hooks.tsx:32:1)
    at LinkWithRef (index.tsx:267:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateForwardRef (react-dom.development.js:19226:1)
    at beginWork (react-dom.development.js:21636:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)
css

1条答案

按热度按时间
mzillmmw

mzillmmw1#

因此，一种方法是在Routes元素中封装两个路径，一个用于登录，另一个用于所有的主路径。主路径将使用一个名为layout的元素，其中将包含导航栏，然后该路径中的嵌套路径将能够根据所选路径进行交换。

import {
 BrowserRouter as Router,
 Routes,
 Route,
 Navigate,
} from "react-router-dom";

return (
 <div>
   <Router>
     <Routes>
       {/* //we set up a conditional check using a ternerary operator to see whether 
       //user is logged in or not.  If logged in, redirect to home page */}
       <Route
         path="/login"
         element={!user ? <Login /> : <Navigate to="/" replace />}
       />
       {/* //we have Layout component built which contains our nav bar and all the nested Routes
         //are swappable within that.  Add whatever user checks here also */}
       <Route path="/" element={<Layout />}>
         <Route index element={<Home />} />
         <Route path="nestedpath" element={<NestedComponent />} />
         <Route path="othernestedpath" element={<OtherNestedComponent/>}/>
         
       </Route>
     </Routes>
   </Router>
 </div>
);

//in components section create module create for your layout
import { outlet } from "react-router-dom";
//import navbar from components etc
function Layout() {
 return (
   <div>
     <Navbar />
     {/* //Outlet is a placeholder for all the nested route components */}
     <Outlet />
   </div>
 );
}

export default Layout;
赞(0）分享  回复(0）举报  2022-12-15
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com