ReactJs маршрутизация: настройка базового c частного маршрута - PullRequest
0 голосов
/ 18 февраля 2020

Приложение. js

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { BrowserRouter, Switch, Route } from "react-router-dom";

import ParentComponent from "./Components/nestedComponents/ParentComponent";
import NavBar from "./Components/Shared/NavBar";

//Protecting a route
import PrivateRoute from "./common/PrivateRoute";
import ProtectedComponent from "./Components/Protected/ProtectedComponent";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <NavBar />
        <Switch>
          <Route path="/home" name="Home" component={ParentComponent} />
          <PrivateRoute
            exact
            path="/protectedRoute"
            component={ProtectedComponent}
          />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

Защищенный компонент. js

import React from "react";

export default function ProtectedComponent() {
  return (
    <div>
      This is a protected component. It can only be accessed under certain
      conditions.
    </div>
  );
}

PrivateRoute. js

import React from "react";
import { Route, Redirect } from "react-router-dom";
const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props => (false ? <Component {...props} /> : <Redirect to="/" />)}
  />
);

export default PrivateRoute;

В настоящее время, в зависимости от логического значения внутри этого оператора:

render={props => (false ? <Component {...props} /> : <Redirect to="/" />)}

Если значение равно false, маршрутизатор будет перенаправлять на "/ " или он будет перенаправлен на ProtectedComponent , который передается PrivateRoute в App. js.

Так что, если я нажму здесь ProtectedComponent справа , он должен вести себя так, как я только что упомянул.
enter image description here
Однако, когда я щелкните, я не перенаправлюсь на "/" , когда логическое значение равно false , и я не получаю указание ProtectedComponent , когда логическое значение равно правда . Просто Ничего не отображается.
enter image description here
Вот ссылка на проект Github

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...