Question

当我尝试时，再次加载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文件夹中创建新的View ListPage之外，没有做任何其他改变，在index.js中给出页面的路径没用登录页面和个人资料页面也没有。我究竟做错了什么？我需要添加一些东西使其工作吗？

Answer 1

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

实际上，您不需要这样做，因为导航到另一个“页面”时不会执行任何GET操作，也不会加载新页面。

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

为了成功导航，您想使用React路由器提供的<Link to="/">Home</Link>或useHistory Link component之类的hook。

如果使用后一种，则可以直接在历史记录数组中推送，这可能更加灵活。

Answer 2

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

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

import ReactDOM from "react-dom";
import React, { useState, useEffect } from "react";

const App = () => {
  const [contents, setContents] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState();

  const url =
    "https://en.wikipedia.org/w/api.php?action=query&origin=*&prop=extracts&format=json&exintro=&titles=Berlin";

  const extractAPIContents = (json) => {
    const { pages } = json.query;
    return Object.keys(pages).map(id => pages[id].extract);
  }

  const getContents = async () => {
    let resp;
    let contents = [];
    setLoading(true);
    try {
      resp = await fetch(url);
      const json = await resp.json();
      contents = extractAPIContents(json);
    } catch(err) {
      setError(err);
    } finally {
      setLoading(false);
    }
    setContents(contents);
  };

  useEffect(() => {
    getContents();
  }, []);

  if (loading) return 'Loading ...';
  if (error) return 'An error occurred';
  return (
    <div>
      <h1>Article</h1>
      {contents.map(content => <div dangerouslySetInnerHTML={{ __html: content }} />)}
    </div>
  )
};

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

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

如果您不想在URL中使用这些哈希，请使用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);。

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

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

2 个答案: