时间戳

首页 > 解决方案 > 在 React 中添加了另一个页面但无法导航

reactjs - 在 React 中添加了另一个页面但无法导航

问题描述

当我尝试时，LandingPage 会再次加载。该 URL 还显示 localhost:3000/list# 而不是 localhost:3000/list。我究竟做错了什么？这是 index.js

import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, HashRouter, Link } from "react-router-dom";

import "assets/scss/material-kit-react.scss?v=1.8.0";

import Components from "views/Components/Components.js";
import LandingPage from "views/LandingPage/LandingPage.js";
import ProfilePage from "views/ProfilePage/ProfilePage.js";
import LoginPage from "views/LoginPage/LoginPage.js";
import ListPage from "views/ListPage/ListPage.js";
let hist = createBrowserHistory();

ReactDOM.render(  
  <HashRouter history={hist}>
    <Switch>
      <Route path="/components" component={Components} />
      <Route path="/profile-page" component={ProfilePage} />
      <Route path="/login-page" component={LoginPage} />
      <Route path="/" component={LandingPage} />
      <Route path="/list" component={ListPage} />
    </Switch>
  </HashRouter>,
  document.getElementById("root")
);

这是我希望用来打开新页面的按钮

      <Button
        style={styl}
        color="success"
        size="lg"
        href="/list"
        target="_blank"
        rel="noopener noreferrer"
      >
        <i className="fas fa-cogs" />
        Pick Parts
      </Button>

我开始使用 CreativeTim 的 Material-UI 工具包，除了从按钮中删除 youtube 链接并添加 /list 以及在 Views 文件夹中创建一个新视图 ListPage 并给出路径之外，并没有真正改变任何东西到 index.js 中的页面它不起作用。登录和个人资料页面也没有。我究竟做错了什么？我需要添加一些东西才能让它工作吗？

标签： reactjsreact-routerreact-router-dom

解决方案

您似乎正在使用React-Router，它是一个前端工具，使您看起来像是在页面之间导航（您可能会对其进行调整，以实际在具有 SSR 和类似Next.js 之类的页面之间导航）。

实际上你没有，因为当你导航到另一个“页面”时没有执行 GET 并且没有加载新页面。

这样，如果您尝试直接访问页面（尝试获取它们），请求将失败，因为该页面实际上没有由任何服务器提供服务。

为了成功导航，您需要使用React-Router 提供的Link组件<Link to="/">Home</Link>或useHistory hook 。

如果您使用后者，您将能够直接推送到历史数组中，这可能更灵活。

推荐阅读