我想显示一个登录页面，如果用户未经验证，他试图键入不同的url，为此，我制作了一个protectedroute组件，但它没有按预期工作，无论我访问哪个url，我只会在按下登录按钮后看到登录页面
protectedroute.js

import React from 'react'
import {Route, Redirect} from 'react-router-dom'

const ProtectedRoute = ({isAuth: isAuth, Component:Component, ...rest}) => {
    return (
        <Route {...rest} render={(props)=>{
            if(isAuth){
                return <Component />
            }else {
                return <Redirect to={{pathname:'/', state:{ from: props.location }}} />
            }
        }} />
    );
};

export default ProtectedRoute;

app.js

import SignIn from "./pages/SignIn";
import { useState } from 'react'
import { Route, Switch} from 'react-router-dom'
import Dashboard from "./pages/Dashboard";
import DatasetGenerator from "./pages/DatasetGenerator"
import Simulator from "./pages/Simulator"
import ProtectedRoute from "./ProtectedRoute";

function App() {

  const [login, setlogin] = useState(false)
const loginHandler = ()=>{
  setlogin(true)}

return ( 
  <div>
    <Switch>
      <Route path='/' exact>
        <SignIn loginHandler={loginHandler} />
      </Route>
      <ProtectedRoute path='/dashboard' component={Dashboard} isAuth={login} />
      <ProtectedRoute path='/dataset-generator' component={DatasetGenerator} isAuth={login} />
      <ProtectedRoute path='/simulator' component={Simulator} isAuth={login} />

    </Switch>

  </div>
)
  }

export default App;

签名

import React from 'react';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';

const useStyles = makeStyles((theme) => ({
  paper: {
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main,
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}));

export default function SignIn(props) {
  const classes = useStyles();

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>

        <Typography component="h1" variant="h5">
          Sign in
        </Typography>
        <form className={classes.form} noValidate>
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="email"
            label="username"
            name="email"
            autoComplete="email"
            autoFocus
          />
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            name="password"
            label="Password"
            type="password"
            id="password"
            autoComplete="current-password"
          />

          <Button onClick={props.loginHandler}
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Sign In
          </Button>

        </form>
      </div>

    </Container>
  );
}

我使用withroute导出 Jmeter 板、数据集生成器和模拟器