Приложение. 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 справа , он должен вести себя так, как я только что упомянул.
Однако, когда я щелкните, я не перенаправлюсь на "/" , когда логическое значение равно false , и я не получаю указание ProtectedComponent , когда логическое значение равно правда . Просто Ничего не отображается.
Вот ссылка на проект Github