2

我尝试创建一个像这个例子这样PrivateRoute的使用，我有一个这样的错误：react-router-dom 

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


反应：16.12.0
反应路由器 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>
  );
}

然后我在Component中导入PrivateRouterfrom react-router-dom ，如下所示：<Home />

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 的新手。
我希望你能帮助我，谢谢。

4

2 回答 2

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 }
            }}
          />
        )
      }
    />
  );
}
于 2020-01-09T07:30:07.220 回答
0

您需要创建私有路由，因为这在react-router-dom

privateRoute您在官方文档中看到的任何内容都是为私有路由创建的自定义组件。

以这个为例

function PrivateRoute({ children, ...rest }) {
  return (
    <Route
      {...rest}
      render={({ location }) =>
        fakeAuth.isAuthenticated ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: location }
            }}
          />
        )
      }
    />
  );
}
于 2020-01-09T07:34:19.087 回答