Попытка импортировать ошибку: «PrivateRoute» не экспортируется из «Reaction-router-dom»

Question

Я пытаюсь создать PrivateRoute использовать react-router-dom , как в этом примере , и у меня есть ОШИБКА, подобная этой:

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

реакция: 16.12 .0
response-router-dom: 5.1.2

в index. js Я импортирую BrowserRoute и используйте их в ReactDOM.render() следующим образом:

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

и в приложении. js Я визуализирую <Home /> Компонент как этот:

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

, затем я импортирую PrivateRouter из Reaction-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.
Надеюсь, вы мне поможете, спасибо.

Answer 1

Вы не можете импортировать PrivateRoute из реактивного маршрутизатора. Проверьте пример

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

В примере - PrivateRoute - это функция, которую необходимо экспортировать, а затем импортировать. Она не импортируется из response-router-dom

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

Answer 2

Вам необходимо создать частный маршрут, потому что он недоступен в react-router-dom

Что бы вы ни видели в официальной документации privateRoute, это пользовательский компонент, созданный для частного маршрута.

Установите это как пример

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