如何使用 localStorage 创建受保护的路由并将react-router-dom响应存储在 localStorage 中，以便当用户下次尝试打开时可以再次查看其详细信息。登录后，他们应该重定向到仪表板页面。
所有功能都添加到 ContextApi 中。Codesandbox 链接：代码
我尝试过但没能实现
路线页面
import React, { useContext } from "react";
import { globalC } from "./context";
import { Route, Switch, BrowserRouter } from "react-router-dom";
import About from "./About";
import Dashboard from "./Dashboard";
import Login from "./Login";
import PageNotFound from "./PageNotFound";
function Routes() {
const { authLogin } = useContext(globalC);
console.log("authLogin", authLogin);
return (
<BrowserRouter>
<Switch>
{authLogin ? (
<>
<Route path="/dashboard" component={Dashboard} exact />
<Route exact path="/About" component={About} /> …withNavigation我有一个嵌套组件，我想在react-navigation v5中的嵌套组件中使用。
当我在博览会中运行https://snack.expo.io/@sushil62/qr-code-scanner时，效果很好，但是当复制 App.js 文件中给出的相同代码时，运行应用程序后，相机会打开，但它扫描时没有显示结果，并且在博览会中，当更改零食版本 33 或更高版本时，它也不起作用。
import React, { Component } from 'react';
import { Alert, Linking, Dimensions, LayoutAnimation, Text, View, StatusBar, StyleSheet, TouchableOpacity } from 'react-native';
import { BarCodeScanner, Permissions } from 'expo';
export default class App extends Component {
state = {
hasCameraPermission: null,
lastScannedUrl: null,
};
componentDidMount() {
this._requestCameraPermission();
}
_requestCameraPermission = async () => {
const { status } = await Permissions.askAsync(Permissions.CAMERA);
this.setState({
hasCameraPermission: status === 'granted',
});
};
_handleBarCodeRead = result => {
if …如何使用 javascript 使用 map 函数（不带 React）在 HTML 元素中呈现对象数组。
var Usrdata = document.querySelector('.box');
var userDetail = [
{name:"sunil",age:"24",place:"delhi",avatar:"./image/abc.jpg",country:"India"},
{name:"sujan",age:"22",place:"assam,",avatar:"./image/abc.jpg",country:"India"},
{name:"abishek",age:"26",place:"kolkata",avatar:"./image/abc.jpg",country:"India"},
{name:"chiranjeev",age:"20",place:"bangalore",avatar:"./image/abc.jpg",country:"India"},
]
userDetail.map(user=>{
console.log (
user.name,
user.age,
user.place,
user.country,
user.avatar
)
})*{
margin: 0;
padding: 0;
}
.box{
margin: 10px;
height: 250px;
background-color: #fff;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Testing</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="customCard">
<div class="row">
<div id="test1" class="col-sm-4 box">
</div>
</div> …