Question

我正在开发一个关于React的简单网站。从主菜单到页面的路由工作正常，但从页面到另一页面的路由却行不通。我有一个名为“位置”的页面，其中显示了位置列表。每个位置都包含一个到详细信息页面的列表，其中显示了该位置的详细信息。问题在于，详细信息位置页面没有单独显示为另一页面；而是显示在位置列表页面下方。

我是React的新手，因此对我的问题的解决方法可能很简单，并且由于我对路由的误解。但是，我无法在线找到解决问题的方法。

问题出在这一行：

<td><Link to={`/locations/${l.id}`}>&nbsp;Topo&nbsp;</Link></td>

在下面的代码中：

import React, { Component } from 'react';
import { BrowserRouter as Router, Link } from "react-router-dom";
import { getApiUrl } from "./Utils";

class LocationList extends Component
{
    state = { locations: null, urlApiRead: getApiUrl('location', "read") }

    getLocationsAsync = async () =>
    {
        let response = await fetch(this.state.urlApiRead);
        let data = await response.json();
        console.log("Getting locations data:", data);

        this.setState({ locations: data });

        return data;
    }

    render()
    {
        if (this.state.locations == null)
            this.getLocationsAsync();

        console.log("Rendering, this.state.locations:", this.state.locations);
        return (
            <div align="center">
                <h1>Locations</h1>
                {
                    this.state.locations
                        ?
                        (
                            <table className="grid">
                                <thead>
                                    <tr>
                                        <th colSpan="2">Location</th>
                                        <th>Website</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {this.state.locations.map(l =>
                                        <tr key={l.id}>
                                            <td>{l.name}</td>

                                            <td><Link to={`/locations/${l.id}`}>&nbsp;Topo&nbsp;</Link></td>
                                            <td><a href={`http://${l.websiteUrl}`}>{l.websiteUrl}</a></td>
                                        </tr>)}
                                </tbody>
                            </table>
                        )
                        :
                        ('Loading... please wait')
                }
                <p><a href={this.state.urlApiRead}>API</a></p>
            </div >
        );
    }
}

export default LocationList;

我希望生成的详细信息页面会像其他页面一样单独显示。但是，它显示在列表下方的“安置列表”页面中。

请参见

https://www.remranger.com/rc-escalada/

然后单击“位置”，然后单击“ Topo”链接之一。

我在这里做错了什么？感谢您的帮助，

雷姆。

Answer 1

您要将对象传递给to的{{1}}属性，您应该传递一个字符串。

Link

要拥有其他属性时，应将它们作为对象传递，例如：

<Link to=`/locations/${l.id}`>

Answer 2

事实证明，可以通过使用常规位置列表页面上的“精确”标签来解决此问题。

App.js

之前：

            <Route path="/locations" component={LocationList} />
            <Route path="/locations/:locationId" component={LocationDetail} />

之后：

            <Route exact path="/locations" component={LocationList} />
            <Route path="/locations/:locationId" component={LocationDetail} />

这会将根页面与参数化的详细信息页面区分开。

可能是典型的初学者的错误。感谢您的帮助！

如何从非主应用程序页面的页面路由到另一页面

2 个答案: