從一個頁面重定向到另一個頁面而不在 Routes.js 文件中顯示該文件路徑

Question

我是 Reactjs 的新手，我正在使用Material-UI ，我的問題是我想使用側邊欄從一個頁面轉到另一個頁面，並在 Material-UI 中進行重定向，必須在側邊欄中顯示該頁面我不不想。

var dashRoutes = [
  {
    path: "/Dashboard",
    restricted: true,
    name: "Dashboard",
    icon: DashboardIcon,
    component: VesselInfoPage,
    layout: "/admin"
  },
  {
    path: "/Add/",
    name: "Add",
    icon: Group,
    component: AddPage,
    layout: "/admin"
  }
];

在上面的代碼中，如果我想從 Dashboard 轉到 Add 頁面，因此有必要在 routes.js 文件中顯示該頁面，這是我不想要的。

Answer 1

在反應中，您始終可以進行編程導航，因為您需要使用歷史記錄 api。

這是相同的示例

class Register extends React.Component {
  handleSubmit = (user) => {
    saveUser(user).then(() =>
      this.props.history.push('/dashboard')
    ))
  }
  render() {
    return (
      <div>
        <h1>Register</h1>
        <Form onSubmit={this.handleSubmit} />
      </div>
    )
  }
}

如果您想詳細了解，請閱讀此內容

React Router 的真正主力是 History 庫。 在幕后，它是跟蹤 React Router 的會話歷史的東西。 當一個組件被 React Router 渲染時，該組件會被傳遞三個不同的 props：location、match 和 history。 這個 history 道具來自 History 庫，並有大量與路由相關的花哨屬性。 在這種情況下，我們感興趣的是 history.push。 它的作用是將一個新條目推送到歷史堆棧中 - 也就是將用戶重定向到另一條路線。

這是一篇關於https://tylermcginnis.com/react-router-programmatically-navigate/ 的博客文章