Question

我正在使用ReactJS开发一个单页应用程序。我的整个应用程序都在“单页”中运行。现在，我需要一个页面，该页面接受URL中使用的ID，并根据用户ID显示结果。在SPA模式中是否可行，还是我必须将网站移至MPA模式？

我尝试了一些答案，但不清楚。

例如：https://stackoverflow.com/questions/id/101

我必须获取ID 101，并根据页面中的ID显示结果。

Answer 1

是肯定的。

让我为您提供一些背景知识。如果要构建具有多个页面的SPA，则希望在客户端使用客户端路由来显示基于浏览器URL的不同页面。据我所知，反应中用于路由的事实上的解决方案是react-router，但还有许多其他选择。 See this link。不幸的是，我无法完全解释如何使用react-router解决方案，但这是一个简单的示例。

在您的主要组件（如App.jsx）内部添加路由：

// 1. do proper imports
import { BrowserRouter } from "react-router-dom";

// 2. wrap your application inside of BrowserRouter component

class App extends React.Component {
// your code

    render() {
        return (
            <BrowserRouter>
                {/* your app code */}

                {/* Add routing */}
                <Route path="/" exact component={Dashboard} />
                <Route path="/questions/id/:id" component={Question} />

                {/* your app code */}
            <BrowserRouter>
        )
    }
}

现在您应该看到，当您的浏览器URL匹配/questions/id/:id时，组件Question应该被安装到页面上。在此组件内，您可以获取传入的id。它将在this.props.match.param.id属性内

class Question extends React.Component {
// your code

    render() {
        const id = this.props.match.param.id;        

        return (
            <div>
                Page with { id } was opened
            <div>
        )
    }
}

确定要熟悉react-router文档。

Answer 2

ReactJs不包含路由器。但是最受欢迎的软件包是React-router。官方文档引用了other good packages

我们可以在SPA模型中创建具有动态ID的链接吗

2 个答案: