Reactjs 反应：重定向到其他页面

我想有条件地重定向到另一个页面，下面是我的代码：

render() {
    if (this.state.logged) {
      return <Redirect to="/admin" />;
    }
    console.log("Login");
    return (
      <div style={this.state.body}>
        <div style={this.state.box}>
          <br />
          <br />
          {this.getForm()}
          <br />
          <br />
        </div>
      </div>
    );
  }

render（）{
if（this.state.logged）{
返回；
}
console.log（“登录”）；
返回(




{this.getForm（）}




);
}

问题是当条件满足并且应该重定向到admin.jsx时

我不断地发现这个错误：

Error: Invariant failed: You should not use <Redirect> outside a <Router>

错误：不变量失败：不应在

这是我的app.js

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

import Logout from "./components/Logout";
import Admin from "./components/Admin";

function App() {
  return (
    <switch>
      <Route exact path="/" component={Login} />
      <Route path="/admin" component={Admin} />
      <Route path="/user" component={Admin} />
      <Route path="/logout" exact component={Logout} />
    </switch>
  );
}

从“React”导入React；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“react router dom”导入{link，Switch，Route}；
从“/components/Login”导入登录名；
从“/components/Logout”导入注销；
从“/components/Admin”导入管理员；
函数App（）{
返回(
);
}

这是我的index.js：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap.css";
import Login from "./components/Login";


ReactDOM.render(<Login />, document.getElementById("root"));

serviceWorker.unregister();

从“React”导入React；
从“react dom”导入react dom；
导入“/index.css”；
从“/App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
导入“bootstrap/dist/css/bootstrap.css”；
从“/components/Login”导入登录名；
render（，document.getElementById（“根”））；
serviceWorker.unregister（）；

这就是教程中所做的，我完全不知道为什么会发生这种情况。

---

请使用

react Router dom

中的

Router

包装整个应用程序，因为它为

重定向提供了上下文

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

import Logout from "./components/Logout";
import Admin from "./components/Admin";

function App() {
  return (
   <Router>
      <Switch>
        <Route exact path="/" component={Login} />
        <Route path="/admin" component={Admin} />
        <Route path="/user" component={Admin} />
        <Route path="/login" exact component={Login} />
        <Route path="/logout" exact component={Logout} />
      </Switch>
    </Router>
  );
}

您必须使用
react Router dom
提供的
Router
组件包装整个应用程序。如果您试图在
路由器
之外使用该库中的任何组件，您将得到该错误

另外，这可能更多的是一个偏好问题，但我认为我不会将
Login
组件作为应用程序中的根。如果未登录，我将呈现
App
组件，然后重定向到
Login

因此，在
index.js中应该有类似的内容

import React from "react";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap.css";
import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(
    <Router>
       <App />
    </Router>,
    document.getElementById("root"));

serviceWorker.unregister();

从“React”导入React；
导入“/index.css”；
从“/App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
导入“bootstrap/dist/css/bootstrap.css”；
从“react Router dom”导入{BrowserRouter as Router}；
ReactDOM.render(
,
document.getElementById（“根”）；
serviceWorker.unregister（）；
你也可以分享你的
index.js
吗？这是否包括
组件？如果没有，那可能就是错误的原因。不，没有，但我已经包括了。打字错误？不，也用| |
{loggedIn？：}
是的，即使我没有注意到。现在拼写错误已经清除了
import React from "react";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap.css";
import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(
    <Router>
       <App />
    </Router>,
    document.getElementById("root"));

serviceWorker.unregister();