Question

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

即。如果路径是＆＃34; /＆＃34;如果路径是＆＃34; / about＆＃34;我想展示Link可以带我到＆＃34; / about＆＃34;我会在那里展示About组件。

在App.js我总是有Link可以带我回到＆＃34; /＆＃34;。

所以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>

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

当我点击＆＃39;转到约＆＃39;它看起来像这样：

正确更新网址以及路由器在Home

中显示的内容

但如果我现在点击“回家”＆＃39;发生这种情况：

正确更新网址，但保持＆＃39;关于＆＃39;渲染Home时的页面？

这是为什么？为什么＆＃34; /＆＃34;似乎仍然路由到＆＃34; / about＆＃34;？我需要更改什么才能使按钮路由回到＆＃34; /＆＃34;并再次显示＆＃39;转到＆＃39; - 按钮？

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

Answer 1

您需要纠正一些事项。

首先，您的应用中只需要一个路由器，而不是嵌套路由器

第二，如果您在父路线上有一个确切的关键字，那么嵌套的路线不会匹配，因为匹配将在父路径上失败

第三次，然后您不想将自定义道具传递给子组件，您必须将其呈现为component={Home}而不是component={() => <Home/>}，如果您需要要将道具传递给儿童，您必须使用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

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

Passing custom props to router component in react-router v4

React Router 4 Nested Routes not rendering

Answer 2

从<Router />

中删除Home条目

对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 3

我需要进行以下更改：

App.js：将路由器更改为Switch，更改路由的顺序并将“/”设置为相对路径

<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>

试着回到＆＃34; /＆＃34;反应路由器？

3 个答案: