我正在构建一个完整的堆栈反应应用程序。当我从前端调用它时,我让堆栈操作并从后端提取信息。我在前端使用axios来访问我在后端设置的端点。不过,我在前端身份验证方面遇到了问题。我使用护照和护照- Google 20用GoogleOAuth2.0登录用户。我把它正常工作了。我遇到的问题是:当用户点击一个特定的URL (由react路由器-dom控制)时,我有一个名为authVerify的函数,运行这个函数,点击后端并检查用户是否登录(通过查看cookie -在JS中是不可访问的)。该函数正确运行,并正确地更新状态。我有一个最初设置为false的身份验证状态字段,在成功的200个响应中,我的setS
文档状态
所有三种呈现方法都将传递相同的三个路由道具匹配位置历史。
他们用这个例子展示了它
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
// All route props (match, location and history) are available to User
function User(props) {
return <h1>Hello {props.match.par
我觉得这很简单,但我希望能有一些洞察力,因为我还是React的初学者。我有一个私有路由设置和一个来自App.js状态的authToken,它是通过props发送的。如果authToken为真,则私有路由应该转到/HomePage,但每次我使用有效凭据按下登录按钮时,它都会将我重定向到/login。 App.js import ReactDOM from 'react-dom';
import HomeNavBar from './HomeNavBar.js'
import Login from './Login.js'
import Regis
这是我的第一个CRA/类型记录,SPA项目,所以很抱歉,如果这是一个初学者的问题。最初,我的所有路由将通过我的肚脐来处理。
到目前为止,当您单击导航条时,您确实可以按需要在屏幕顶部获得组件,但是如果向下滚动,您也会得到重复的初始页面布局。
因此,我的问题是如何锚定指向组件的导航链接,而不仅仅是将该组件放在页面顶部,以便再次重复。下面是我的代码链接。
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { render } from "
我正在做一个实践练习,我正在使用router v6创建子路由,问题是配置文件路由有一个身份验证,如果它是认证的--它向我显示配置文件组件,否则它会把我送回家。现在,对于这个/profile路由,我创建了一个/exerciselist子路由,但是当我想访问/配置文件/锻炼者时,组件不加载我,它直接把我发送到/profile路由,我如何使它加载配置文件/练习路径?
import React from 'react'
import { BrowserRouter, Route, Routes, Navigate} from "react-router-dom"
im
我对React生态系统很陌生,通过尝试简单的应用程序来学习。在这种情况下,我将尝试路由如何在react应用程序中工作。基本上,我们的想法是:
点击链接(一个反应路由器组件)导航到一个新页面。
成功完成分派的异步操作后,导航到新页面。
这是我的密码
import React from 'react'
import {Link} from 'react-router'
import {routerActions} from 'react-router-redux'
import {connect} from 'react-re
我正在建立一个网站与反应,我创建了一个导航条,这是打印在我的本地服务器上的反应应用程序。但我需要登录页面显示在导航栏之前,所有其他页面显示。
这是我的app.js
import './App.css';
import Navbar from './components/navbar';
import Login from './pages/login';
import Onboarding from './pages/onboarding';
import Training from './pages/training
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import Reducer from './Reducer/';
import {HashRouter as Router, Ro
我正在使用react-router-dom版本6.4.0启动react项目,但无法为所有路由创建通用的标头。
App.js --这是我要添加RouterProvider的文件
import logo from './logo.svg';
import './App.css';
import { Link, Outlet, RouterProvider } from "react-router-dom";
import { routers } from "./routes/routes";
function App() {
r
我是一个初学者前端开发,我试着做一个虚构的网站。我正在学习如何对路由器做出反应。所以,当我试图点击家庭/关于或联系按钮,它不会打开它。我做错了什么?
下面是我的代码:
我的应用程序代码:
import React from 'react';
import './App.css';
import Navibar from './Components/Navibar';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Hom
我试图让一个导航栏使用react,但是尽管链接已经改变了,但内容从未改变过!
我的App.js中的路由:
import { BrowserRouter as Router , Routes, Route } from "react-router-dom";
import Layout from './hocs/Layout';
import Home from './components/Home';
import Blog from './components/Blog';
import BlogDetail from '
我正在尝试创建一个多页面的react应用程序。反应路由器是正确的方式吗?
由于只有一个名为index.HTML的HTML文件,它从app.js的组件中提取呈现出来的jsx代码。尽管我们可以感觉到使用react路由的多个页面;从技术上讲,反应创建的不是只有一页的应用程序吗?
import React from 'react';
import { BrowerRoute as Router, Route } from 'react-router-dom';
import App from './components/About';
import Ho
嗨,伙计们,我在学习路线的时候,我的代码有这个问题,似乎找不到答案。我的页面在某些时候不会呈现,我将在下面解释。
这是index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./app/App";
import { store } from "./app/store";
import { Provider } from "react-redux";
import * as serviceWorker
有人能帮我用React路由器构造React吗?
<div>
<Navbar /> //Navbar should be shown only for '/' and '/login'
<Route path="/" component={IndexPage} />
<Route path="/login" component={Login} />
<Footer /> //Footer should be shown onl