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

Question

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

即如果路径是“/”，我想显示一个可以带我到“/about”的 Link，如果路径是“/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>

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

当我点击 'Go to about' 时，它看起来像这样：

正确更新 url 以及路由器在 Home

中显示的内容

但是如果我现在点击 'Go to home' 会发生这种情况：

正确更新 url 但在呈现时保留 'about' 页面 Home?

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

这是我用来重现问题的所有代码：pastebin

Answer 1

从 Home

中删除 <Router /> 个条目

对 App.js 进行以下调整我注意到列出了 /other 而不是 /about 路由的 About 组件。如果它是正确的，请不要管它，否则将其调整为 About 组件，如下所示。您确实需要在顶部导入这些组件，所以我假设您已经这样做了。

  <Router>
    <div>          
      <Link to="/">
        <button>Go to home</button>
      </Link>
      <Route exact path="/" component={Home} />
      <Route exact path="/about" component={About} />
    </div>
  </Router>

对于 Home.js，您需要渲染 <HomeController />

  <div>
    THIS IS HOME WOO!
    <HomeController />
  </div>

Answer 2

我需要进行以下更改：

App.js: 将 Router 更改为 Switch，更改 Routes 的顺序并将“/”设置为相对路径

<Switch>
  <Route exact path="/other" component={() => <Other/>} />
  <Route path="/" component={() => <Home/>} />
</Switch>

从 Home 移除路由器：

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

Answer 3

您需要更正一些问题。

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

Second，如果您在 parent 路由上有一个精确关键字，那么嵌套路由将不会匹配，因为匹配将在 parent本身

Third，那么你不想将自定义道具传递给 child 组件，你必须像 component={Home} 而不是 component={() => <Home/>} 并且如果你想将道具传递给 children，你必须使用 render 而不是 component 道具并写 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"));

Working demo

详情可参考以下问题

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

Trying to go back to "/" in react router?

reactjs

react-router

react-router-dom