试图回到反应路由器中的“/”？

Question

所以，我要的是有一个顶级路由App.js的路由到 Home的“/”。在Home我想渲染一些东西，然后在一个地方我根据路径选择要渲染的内容。

即如果路径是“/”，我想显示一个Link可以带我到“/about”的路径，如果路径是“/about”，我将在About那里显示组件。

在App.js我总是有一个Link可以带我回到“/”。

---

所以App.js渲染这个：

  <Router>
    <div>          
      <Link to="/">
        <button>Go to home</button>
      </Link>
      <Route exact path="/" component={() => <Home/>} />
      <Route exact path="/other" component={() => <Other/>} />
    </div>
  </Router>

Home 渲染这个：

  <div>
    THIS IS HOME WOO!
    <Router>
      <div>
        <Route exact path="/" component={() => <HomeController/>} />
        <Route exact path="/about" component={() => <About/>} />
      </div>
    </Router>
  </div>

HomeController 渲染这个：

  <Link to="/about">
    <button>Go to about</button>
  </Link>

并About呈现这个：

  <div>
    ABOUT
  </div>

---

当我启动应用程序时，它看起来像这样：

当我单击“转到约”时，它看起来像这样：

正确更新 url 和路由器显示的内容 Home

但是，如果我现在单击“回家”，则会发生这种情况：

正确更新 url 但在渲染时保留“关于”页面Home？

---

为什么是这样？为什么“/”似乎仍然路由到“/about”？我需要更改什么才能使按钮路由回到“/”并再次显示“转到大约”按钮？

这是我用来重新创建问题的所有代码：pastebin

Answer 1

有几件事您需要纠正。

首先，您的应用程序中必须只有一个路由器，而不是嵌套的路由器

其次，如果父路由上有精确的关键字，则嵌套路由将不会匹配，因为匹配将在父路由本身失败

第三，那么你不想将自定义道具传递给子组件，你必须像component={Home}and not 一样渲染它们component={() => <Home/>}，如果你想将道具传递给子组件，你必须使用renderand not componentprop 并编写render={(props) => <Home test="1" {...props}}

你的完整代码看起来像

import React, { Component } from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

class App extends Component {
  render() {
    return (
      <div className="App">
        <Router>
          <div>
            <Link to="/">
              <button>Go to home</button>
            </Link>
            <Route path="/" component={Home} />
            <Route exact path="/other" component={Other} />
          </div>
        </Router>
      </div>
    );
  }
}

class Home extends Component {
  render() {
    return (
      <div className="home">
        <div>
          <Route exact path="/" component={HomeController} />
          <Route exact path="/about" component={About} />
        </div>
      </div>
    );
  }
}

class HomeController extends Component {
  render() {
    return (
      <div className="homecontroller">
        <Link to="/about">
          <button>Go to about</button>
        </Link>
      </div>
    );
  }
}

class About extends Component {
  render() {
    return <div className="about">ABOUT</div>;
  }
}

class Other extends Component {
  render() {
    return <div className="other">OTHER</div>;
  }
}

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

工作演示

您可以参考以下问题了解更多详情

将自定义道具传递给react-router v4中的路由器组件

React Router 4 嵌套路由不渲染