React - 在不加载页面的情况下在 url 之间导航

Question

我正在使用 React 构建网站。我有一个 url http://0.0.0.0:9000/courseware/course/6/content/programming/issues/lab/1 显示属于 id 1 实验室的问题列表。

当我点击一个问题（例如，22）时，我希望 url 变成 http://0.0.0.0:9000/courseware/course/6/content/programming/issue/22。

我试过这样做

this.props.history.push({
     pathname: "issue/" + this.state.issue.id
})

但是 url 会变成 /programming/issues/lab/1/issue/22

我试过这样做

const history = useHistory();
history.goBack();
this.props.history.push({
     pathname: "issue/" + this.state.issue.id
})

但是有react hook错误

然后我尝试做

this.props.history.goBack();
this.props.history.push({
     pathname: "issue/" + this.state.issue.id
})

但是这是在浏览页面，下面的推送功能不起作用。

首先，我是否以正确的方式处理 url？如果是，那么我该如何解决这个问题？

我假设我必须使用历史记录在 url 之间导航，而无需实际重新加载页面。

提前致谢

Answer 1

实现此目的的唯一方法是在 url 之前添加 / 并将 id 附加到整个 url。这样反应路由器就会知道你插入的是绝对 url 路径而不是相对路径。

this.props.history.push({
     pathname: `/courseware/course/${some-id}/content/programming/issue/${this.state.issue.id}`
})

Answer 2

使用react-router-dom就容易多了。首先， npm i -D react-router-dom

Basic Usage

index.js:

import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="blogs" element={<Blogs />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

示例说明

我们先用 <BrowserRouter> 包裹我们的内容。

然后我们定义我们的<Routes>。一个应用程序可以有多个 <Routes>。我们的基本示例只使用了一个。

<Route>可以嵌套。第一个 <Route> 的路径为 / 并呈现 Layout 组件。

嵌套的<Route>继承并添加到父路由。所以 blogs 路径与父路径合并成为 /blogs。

Home组件路由没有路径但是有index属性。即指定这条路由为父路由的默认路由，即/.

将路径设置为 * 将作为任何未定义的 URL 的 catch-all。这非常适合 404 错误页面。

页面/组件

Layout 组件有和元素。

<Outlet> 呈现当前选择的路线。

<Link>用于设置URL和跟踪浏览历史。

任何时候我们 link 到内部路径，我们将使用 <Link> 而不是 <a href="">。

“布局路由”是一个共享组件，在所有页面上插入通用内容，例如导航菜单。

Layout.js:

import { Outlet, Link } from "react-router-dom";

const Layout = () => {
  return (
    <>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/blogs">Blogs</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <Outlet />
    </>
  )
};

export default Layout;

Answer 3

对于你的情况，我建议使用这种相对路径名来解决问题： "../../../issue/this.state.issue.id"。这样你就可以使用 react-router 导航到你想要的相对于当前路径的路径。您使用相对路径走在正确的轨道上：

this.props.history.push({
     pathname: "issue/" + this.state.issue.id
})

你只需告诉它后退 3 步。

React - 在不加载页面的情况下在 url 之间导航

React - Navigating between urls without page loading

javascript

reactjs

react-router

示例说明

页面/组件