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

【问题标题】：Added another page in React but couldn't navigate在 React 中添加了另一个页面但无法导航
【发布时间】：2019-11-17 11:03:55
【问题描述】：

当我尝试时，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 中给出页面的路径它不起作用。登录和个人资料页面也没有。我究竟做错了什么？我需要添加一些东西来使它工作吗？

【问题讨论】：

不需要使用react-router带来的Link组件（重定向）吗？
尝试使用Links 或props.history.push 函数。

标签： reactjs react-router react-router-dom

【解决方案1】：

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

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

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

为了成功导航，您想使用Link component，例如 React-Router 提供的<Link to="/">Home</Link> 或useHistory hook。

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

【讨论】：

【解决方案2】：

这是一个 CodeSandbox，其工作版本与您的代码非常相似。

https://codesandbox.io/s/distracted-davinci-4467b

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Home from "./Home";
import Login from "./Login";

import "./styles.css";

function App() {
  return (
    <Router>
      <div>
        <Link to="/" style={{ marginRight: "10px" }}>
          Home
        </Link>
        <Link to="/login">Login</Link>
      </div>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
      </Switch>
    </Router>
  );
}

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

URL 还显示 localhost:3000/list# 而不是 localhost:3000/list。我究竟做错了什么？

如果您不想在 URL 中使用这些哈希值，请使用 BrowserRouter。

此外，除非您有特定原因，否则您无需创建自己的browserHistory。 BrowserRouter 将为您做到这一点。

【讨论】：