路由作为整页打开而不是在同一页面中打开

Question

我正在将 react 路由器用于 SPA 仪表板。我现在在仪表板中有这两条路线（Routes.js）。此外，App.js 中的单独路由用于登录页面。

现在它在加载和单击不同路线时可以正常工作。例如，当我单击客户路线（在侧边栏中）时，它会打开右侧同一页面上的客户部分。但是，当我刷新客户页面 localhost:5000/customers 时，它现在作为单独的页面打开。我该如何解决这个问题。

我尝试调试它，但仍然没有运气。 这是一个例子：https://github.com/gouravthakur39/MRE 不幸的是无法在代码沙箱中重现它

Routes.js

import React from "react";
import { Route, Switch } from "react-router-dom";

import Dashboard from "../pages/Dashboard";
import Customers from "../pages/Customers";

const Routes = () => {
  return (
    
    <Switch>
      <Route path="/home" exact component={Dashboard} />
      <Route path="/customers" exact component={Customers} />
    </Switch>
  
  );
};

export default Routes;

App.js 的一部分

import { Fragment } from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import PrivateRoute from "./private/PrivateRoute";

import Landing from "./pages/Landing";
import Home from "./pages/Home";
import Customers from "./pages/Customers";

function App() {
  return (
    <Fragment>
      <div className="App">
        <BrowserRouter>
          <Switch>
            <Route exact path="/" component={Landing} />
            <PrivateRoute exact path="/home" component={Home} />
            <PrivateRoute exact path="/customers" component={Customers} />
          </Switch>
        </BrowserRouter>
      </div>
    </Fragment>
  );
}

export default App;

Answer 1

问题/问题

根据您的代码和Dashboard 组件上的描述，听起来您希望Dashboard 和Customers 在"/home" 路径中“嵌套”呈现。

const Dashboard = () => {
  return (
    <div>
      <h1>Dashboard</h1>
      <p>I want to open dashboard and customers here when clicked</p>
      <p>
        Right now, when you click customers, it will open it in new page and not
        here.
      </p>
    </div>
  );
};

这是因为Home 将Dashboard 呈现在同一"/home" 路径上，并且侧边栏链接到根路由器级别的“/customers”路径。这个Customers 组件在嵌套的主页/仪表板组件之外。

解决方案

应用

为此，App 中的根 "/home" 需要不完全匹配才能呈现嵌套路由。还要记住，在Switch 组件中，路径顺序和特异性很重要。将路径从 more 特定到 less 特定，即“/home”比“/”更具体，应该在更高/之前排序。 "/customers" 路由/路径应该被删除，因为它将由 Home 呈现。

function App() {
  return (
    <Fragment>
      <BrowserRouter>
        <Switch>
          <Route path="/home" component={Home} />
          <Route path="/" component={Landing} />
        </Switch>
      </BrowserRouter>
    </Fragment>
  );
}

路线（由Home渲染）

使用useRouteMatch 钩子收集当前匹配的path 值并构建嵌套路由。记住Switch 的路径顺序和特异性规则。

import { Route, Switch, useRouteMatch } from "react-router-dom";

const Routes = () => {
  const { path } = useRouteMatch();

  return (
    <Switch>
      <Route path={`${path}/customers`} component={Customers} /> // "/home/customers"
      <Route path={path} component={Dashboard} />                // "/home"
    </Switch>
  );
};

侧边栏（由Home呈现）

使用useRouteMatch 挂钩收集当前匹配的url 值并构建嵌套链接。

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

const Sidebar = () => {
  const { url } = useRouteMatch();

  return (
    <div>
      <ul>
        <li>
          <Link to={url}>Dashboard</Link>                // to "/home"
        </li>
        <li>
          <Link to={`${url}/customers`}>Customers</Link> // to "/home/customers"
        </li>
      </ul>
    </div>
  );
};