通过链接地址导航到反应应用程序中的特定位置？答案

【问题标题】：Navigate to specific location in react app by link address?通过链接地址导航到反应应用程序中的特定位置？
【发布时间】：2021-08-16 22:49:47
【问题描述】：

我有一个包含一些组件的反应应用程序网站。我想通过 url 地址直接导航到我的应用中的特定位置。

这是网站网址：https://baryogo.co.il

这是我的路线：

          <Route path='/home' component={Menu} />
          <Route path='/contactus' component={Contactus} />
          {/* <Route path='/ourservices' component={OurServices} /> */}
          <Route path='/gallery' component={Gallerya} />
          <Route path='/ourcustomers' component={OurCustomers} />
          <Route exact path="/view-category-details/:id" component={ViewCategoryDetails} />
          <Route exact path="/view-category-images/:title" component={ViewCategoryImages} />

例如，当我尝试访问 www.baryogo.co.il/gallery 时，它是有效的，

但是当我尝试直接访问具有特定 id 或标题的 view-category-details 或 view-category-images 时，它显示为空白。

喜欢这个网址： https://baryogo.co.il/view-category-details/0

【问题讨论】：

标签： reactjs

【解决方案1】：

其实你提供的代码示例不足以说明你的问题

下面是一个非常简单的实现：

import React from "react";
import ReactDOM from "react-dom";
import { Link, BrowserRouter as Router, Route } from "react-router-dom";

const users = [
  {
    name: `Dwayne`
  },
  {
    name: `The Rock`
  },
  {
    name: `Johnson`
  }
];

const UsersPage = () => {
  return (
    <>
      {users.map((user, index) => (
        <h5 key={index}>
          <Link to={`/user/${index + 1}`}>{user.name}'s Page</Link>
        </h5>
      ))}
    </>
  );
};

const UserPage = ({ match, location }) => {
  const {
    params: { userId }
  } = match;

  return (
    <>
      <p>
        <strong>User ID: </strong>
        {userId}
      </p>
      <p>
        <strong>User Name: </strong>
        {users[userId - 1].name}
      </p>
    </>
  );
};

const App = () => {
  return (
    <section className="App">
      <Router>
        <Link to="/users">Users</Link>
        <Route exact path="/users" component={UsersPage} />
        <Route exact path="/user/:userId" component={UserPage} />
      </Router>
    </section>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

【讨论】：

【解决方案2】：

那是因为 React 是客户端渲染的。你从 React-Router 看到的 Routing 只是视觉的。

当您导航到 URL https://myurl.com/path/to/page 时，您是在指示浏览器向该位置发起请求。如果您的应用程序不是服务器端呈现的，那么您的服务器在该位置看不到任何东西。当您构建客户端渲染的 React 应用程序时，只有一个 index.html，当您转到放置它的路径时，服务器会看到它。例如https://myurl.com/myreactapp，但这是唯一可用作客户端渲染应用程序的文件。如果您尝试访问https://myurl.com/myreactapp/myroute，服务器将看不到那里，因为那里什么都没有。

要将此类功能与 React 应用程序结合，您需要使其在服务器端呈现，或使其静态生成，以便在构建时单独生成路由/页面。有很多方法可以手动执行此操作，但对于大多数人我建议使用Next.js 或Gatsby.js。 Next.js 是我个人的推荐，因为它同时提供服务器端渲染 (SSR) 和静态站点生成 (SSG)，而 Gatsby 只是一个静态站点生成器。

我希望这回答了你的问题。

【讨论】：