如何使用 React Router 更改在主 App.js 组件中也路由的组件内的路由？答案

【问题标题】：How can I use React Router to change routes from within a component that is also Routed in the Main App.js component?如何使用 React Router 更改在主 App.js 组件中也路由的组件内的路由？
【发布时间】：2019-10-21 04:20:29
【问题描述】：

这是我的 App.js，其中包含我成功登录后要重定向到的包装器（主页）组件和仪表板。

import React from "react";
import Wrapper from "./wrapper";
import Dashboard from "./Dashboard";
import "./App.css";
import { Route, Switch } from "react-router-dom";


function App() {
  return (     
      <Switch>
      <Route exact path="/" component={Wrapper} />
      <Route exact path="/dashboard" component={Dashboard} />
      </Switch>

  );
}

export default App;

这是包含我想要做的路由的包装器组件，我只是想在登录和注册之间移动而不离开主屏幕。

import React from "react";
import Navbar from "./Nav";
import Signin from "./Signin";
import Info from "./Info";
import Register from "./Register";
import { Switch, Route } from "react-router-dom";

const Wrapper = () => {
  return (
    <div className="wrapper">
      <Navbar nav={"Home"} navv={"Sign in"} navvv={"Register"} />
      <div className="home-body pa5">
        <Info />
        <Switch>
          <Route exact path='/signin' component={Signin} />
          <Route exact path="/register" component={Register} />
        </Switch>
      </div>
    </div>
  );
};

export default Wrapper;

Info 组件有这样的链接，导航栏链接也可以做同样的事情，但效果很好。

import React from "react";
import { Link,withRouter } from "react-router-dom";

const Info = () => {
  return (
    <div className="bg-white-60 br3">
      <p className="f1 center pa3 orange sans-serif">
        Sick? Skip the clinic queue! <br />
        Register now to book an appointment
      </p>
      <div className="ph3">
        <Link
          className="f6 link dim ba ph3 pv2 mb2 dib orange bg-near-white mr4"
          to="/signin"
        >
          Sign in
        </Link>
        <Link
          className="f6 link dim ba ph3 pv2 mb2 dib orange bg-near-white mr4"
          to="/register"
        >
          Register
        </Link>
      </div>
    </div>
  );
};

export default withRouter(Info);

我希望能够单击包装器组件中的信息中的链接并呈现我的签名和登录组件。现在，当我单击任一链接时，它会将我带到一个空白页面/屏幕。我被困住了我知道像这样在路由组件内部路由是可能的。但我需要帮助

【问题讨论】：

您的主要路线将只有一条，您的嵌套导航可以是多条。
我发布了一个参考，如果不让我知道将自定义嵌套路由，它将帮助您了解您的要求。
从 app.Js，如果我删除 exact。它几乎可以正常工作，但是包装器总是呈现，我的仪表板无法替换它。而是仪表板出现在其下方。一定有办法解决
你能分享一下沙箱，让我检查一下吗？

标签： reactjs react-router

【解决方案1】：

从<Route exact path="/" component={Wrapper} /> 中移除exact 并将其移至Switch

的底部

【讨论】：

我知道这是一个粗略的修复，但它确实有效。我会暂时坚持下去，谢谢

【解决方案2】：

或者你可以这样做。将所有子组件（SignIn 或 SignUp...）包装到 Wrapper。

并在您的 Wrapper 中添加 {this.props.child}

我更喜欢这种方式，因为我可以在一个地方管理路线。

应用

import React from "react";
import Wrapper from "./wrapper";
import Dashboard from "./Dashboard";
import "./App.css";
import { Route, Switch } from "react-router-dom";


function App() {
  return (     
      <Switch>
          <Route exact path="/" component={Wrapper} />
          <Route exact path="/dashboard" component={Dashboard} />
          // Add these routes to App
          <Route exact path='/signin' component={Signin} />
          <Route exact path="/register" component={Register} />
      </Switch>

  );
}

export default App;

包装器

import React from "react";
import Navbar from "./Nav";
import Signin from "./Signin";
import Info from "./Info";
import Register from "./Register";
import { Switch, Route } from "react-router-dom";

const Wrapper = () => {
  return (
    <div className="wrapper">
      <Navbar nav={"Home"} navv={"Sign in"} navvv={"Register"} />
      <div className="home-body pa5">
        <Info />
        {...this.props.child} // Replace from <Switch> to this
      </div>
    </div>
  );
};

export default Wrapper;

登录或登录组件

import React from "react";
import { Link,withRouter } from "react-router-dom";
import Wrapper from "./Wrapper";

const Info = () => {
  return (
    <Wrapper> // Add this 
        <div className="bg-white-60 br3">
          <p className="f1 center pa3 orange sans-serif">
            Sick? Skip the clinic queue! <br />
            Register now to book an appointment
          </p>
          <div className="ph3">
            <Link
              className="f6 link dim ba ph3 pv2 mb2 dib orange bg-near-white mr4"
              to="/signin"
            >
              Sign in
            </Link>
            <Link
              className="f6 link dim ba ph3 pv2 mb2 dib orange bg-near-white mr4"
              to="/register"
            >
              Register
            </Link>
          </div>
        </div>
    </Wrapper>
  );
};

export default withRouter(Info);

【讨论】：

【解决方案3】：

正如 Vlad 所说，首先您需要从 / 中删除 exact，但还要在 /dashboard 路由之后将其向下移动，因此如果 URL 恰好是 /dashboard 将与 Dashboard 匹配组件，否则将与 Wrapper 组件匹配。这应该有效：

function App() {
  return (     
      <Switch>
          <Route exact path="/dashboard" component={Dashboard} />
          <Route path="/" component={Wrapper} />
      </Switch>

  );
}

【讨论】：