Question

我有：

<Switch>
    <Route
        exact
        path={'/path/to/my/component'}
        component={MyComponent}
    />
    ...
</Switch>



MyComponent:

    return (
        <div>
            <h1>Here Some Text</h1>
            <Link to={'/path/to/my/component/test'}>Test</Link>
            <Route exact path={"/path/to/my/component/test"} component={MyOtherComponent} />

        </div>
    )

我能够渲染MyComponent，但是当我单击指向.../test路线的链接时，它不会渲染下面的路线。转到我定义的404页面。

我想念什么吗？

-

因此，在测试了一些答案之后，我遇到一个问题，即链接重定向到的路由没有显示。

给出以下代码（请注意，所有这些代码已经是一条路线并且在<switch>内）。

    render() {
        const { match } = this.props;
        return (
            <div className="advanced-configuration">
                <div className="advanced-configuration__content userManagement__body">
                    <Link to={`${match.url}/test`}>Test</Link>
                    <Route exact path={`${match.url}/test`} component={() => <h1>test123</h1>} />
                    <Route exact path={match.url} component={() => <h2>Hi from main compoponent</h2>} />
                </div>
            </div>
        );
    }
}

语句：“来自主要组件的嗨”在我到达这条路线时得到加载，但是当我单击测试链接时，它落入了我的“ 404”路线，即：

<Route component={NotFound} />

此NotFound路由是MyComponent的兄弟，它在根交换机的末尾，这是我在此问题上发布的第一个路由。

还有什么我想研究的，以查看破坏此链接的原因？

Answer 1

您是否尝试过使用match.url。这样的事情。这是documentation所说的。

const Topics = ({ match }) => (
  <div>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>Rendering with React</Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>Components</Link>
      </li>
    </ul>

    <Route path={`${match.url}/:topicId`} component={Topic} />
      <Route
        exact
        path={match.url}
        render={() => <h3>Please select a topic.</h3>}
      />
  </div>
);

const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
);

Answer 2

您尝试过类似的事情吗：

    let match = this.props.match
    <div>
        <h1>Here Some Text</h1>
        <Link to={match.url + '/test'}>Test</Link>
        <Route exact path={match.url + "/test"} component={MyOtherComponent} />

    </div>

在您更新的问题中，我可以通过使用此标记单击链接来查看渲染的JSX：

<Link to={match.url + '/test'}>Show Test!</Link>
<Route path={match.url + "/test"} component={() => <h1>test123</h1>} />

嵌套路线未呈现

2 个答案: