javascript - 尝试导入错误: 'PrivateRoute' is not exported from 'react-router-dom'

Question

我尝试创建一个 PrivateRoute使用react-router-dom like this example我有一个这样的错误:

Attempted import error: 'PrivateRoute' is not exported from 'react-router-dom'.

react :16.12.0
react 路由器-dom:5.1.2

在 index.js 中，我导入 BrowserRoute并在 ReactDOM.render() 中使用它们像这样:

ReactDOM.render(
  <BrowserRouter><App /></BrowserRouter>,
  document.getElementById('root')
);

在App.js中我渲染 <Home />像这样的组件:

function App() {
  return (
    <div className="App">
      <Home />
    </div>
  );
}

然后我导入 PrivateRouter来自<Home />中的react-router-dom像这样的组件:

import { 
  Switch,
  // Route,
  PrivateRoute 
} from 'react-router-dom';

我使用PrivateRoute里面render()功能如下:

<Switch>
  <PrivateRoute path="/customer">
    <RootContent 
      displayContent="CUSTOMER" 
      responseCode={this.state.responseCode}
      responseStatus={this.state.responseStatus}
      responseMessage={this.state.responseMessage}
      responseData={this.state.responseData}
      getApiSuccess={this.state.getApiSuccess}
      USER_TOKEN={this.state.USER_TOKEN}
    />
  </PrivateRoute>
</Switch>

我对 ReactJS 还是新手。
希望您能帮助我，谢谢。

Answer 1

您无法从react-router-dom导入PrivateRoute。检查示例

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  Redirect,
  useHistory,
  useLocation
} from "react-router-dom";

在示例中 - PrivateRoute 是一个需要导出然后导入的函数 - 它不是从react-router-dom导入的

function PrivateRoute({ children, ...rest }) {
  return (
    <Route
      {...rest}
      render={({ location }) =>
        fakeAuth.isAuthenticated ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: location }
            }}
          />
        )
      }
    />
  );
}