反应私人路线

Question

我正在尝试应用privateRoute，但无论是组件还是重定向都无法正常工作 我也尝试过使用类似文档的子项，但问题相同。 React不会读取Component，而在导入它时会出现错误Component被调用但未使用

import React from "react";
import { BrowserRouter as Route, Redirect } from "react-router-dom";
import { isAuthenticated } from './auth';

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route
        {...rest}
        render={props =>
            isAuthenticated() ? (
                <Component {...props} />
            ) : (
                    <Redirect
                        to={{
                            pathname: "/signIn",
                            state: { from: props.location }
                        }}
                    />
                )
        }
    />
);
export default PrivateRoute;
```
my routes in app
``
function App() {
  return (
    <Router>
      <NavbarComponent />
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/products" exact component={Products} />
        <Route path="/signIn" exact component={SignIn} />
        <Route path="/signUp" exact component={SignUp} />
        <PrivateRoute path="/dashboard" exact component={Dashboard} />
        <Redirect to="/" />
      </Switch>
    </Router>
  );
}
`

```

Answer 1

在定义Route组件时，您必须导入并使用PrivateRoute

import { Route, Redirect } from "react-router-dom";

不是BrowserRouter：

import { BrowserRouter as Route, Redirect } from "react-router-dom";