如何使用 React-Router 从一条路线转到另一条路线？

Question

我有以下代码。它存在于具有路由“login”的文件中。从 root 开始，我有另一条路线“create-account”。 每当我单击 Login.jsx 中的“a”元素将我带到“create-account”时，它就会将我带到“login/create-account”。我还尝试过“./create-account”和“../create-account”。 有什么我可以做的吗？我找不到任何解决方案。 我正在使用 React-Router-Dom 6.9.0。

登录.jsx

import { useNavigate } from "react-router-dom";

export default function LoginForm() {
  const navigate = useNavigate();

  return (
    <div className="loginForm">

      <h1>Login</h1>
      <p>
        Don't have an account? 
        <a onClick={() => navigate("../create-account")}> Create an account </a>.
      </p>

还有我的 App.jsx（用作我的路由器）

import React, { useState, createContext } from 'react'
import { Routes, Route } from 'react-router-dom'
import { BrowserRouter as Router } from 'react-router-dom'
import { useCookies } from 'react-cookie'

import Master from './Master.jsx'
import HomePage from './HomePage.jsx'
import DashCards from './DashCards.jsx'
// Authentication Pages
import LoginForm from './Auth/SignInForm.jsx'
//import CreateAccountForm from './Auth/CreateAccount.jsx'
//import LogoutPage from './Auth/SignOut.jsx'

export const AppContext = createContext()

export default function App() {

  const [cookies, setCookie, removeCookie] = useCookies(['token'])
  let [authenticated, setAuthenticated] = useState(cookies.token !== undefined)
  let [loggedInUser, setLoggedInUser] = useState([])
  let [users, setUsers] = useState([])

  return (
    <AppContext.Provider value={{ authenticated, setAuthenticated, loggedInUser, setLoggedInUser, setCookie, removeCookie, users, setUsers, }}>
      <Router className="react-stuff">
        <Routes>

          <Route path="/" element={<Master/>} >
            <Route index element={<HomePage />} />

            <Route path="login" element={<LoginForm />} />
            {/* <Route path="logout" element={<LogoutPage />} /> */}
            <Route path="create-account" element={<div>404: Page Under Construction</div>} />
          </Route>

        </Routes>
      </Router>
    </AppContext.Provider >
  )
}

Answer 1

在您的情况下，由于 Login.jsx 嵌套在登录路由下，因此使用“../create-account”将从登录向上导航到根目录，然后导航到 create-account，从而导致登录/创建帐户.

要直接从登录导航到创建帐户路由，您需要指定从根目录开始的绝对路径：

<a onClick={() => navigate("/create-account")}>Create an account</a>

这样，无论当前路由的嵌套级别如何，它将直接导航到创建帐户路由。

您的 Login.jsx 将如下所示：

import { useNavigate } from "react-router-dom";

export default function LoginForm() {
  const navigate = useNavigate();

  return (
    <div className="loginForm">
      <h1>Login</h1>
      <p>
        Don't have an account? 
        <a onClick={() => navigate("/create-account")}>Create an account</a>.
      </p>
    </div>
  );
}

app.jsx

import React, { useState, createContext } from 'react';
import { Routes, Route } from 'react-router-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { useCookies } from 'react-cookie';

import Master from './Master.jsx';
import HomePage from './HomePage.jsx';
import DashCards from './DashCards.jsx';
// Authentication Pages
import LoginForm from './Auth/SignInForm.jsx';
//import CreateAccountForm from './Auth/CreateAccount.jsx';
//import LogoutPage from './Auth/SignOut.jsx';

export const AppContext = createContext();

export default function App() {

  const [cookies, setCookie, removeCookie] = useCookies(['token']);
  let [authenticated, setAuthenticated] = useState(cookies.token !== undefined);
  let [loggedInUser, setLoggedInUser] = useState([]);
  let [users, setUsers] = useState([]);

  return (
    <AppContext.Provider value={{ authenticated, setAuthenticated, loggedInUser, setLoggedInUser, setCookie, removeCookie, users, setUsers }}>
      <Router className="react-stuff">
        <Routes>
          <Route path="/" element={<Master/>}>
            <Route index element={<HomePage />} />
            <Route path="login" element={<LoginForm />} />
            {/* <Route path="logout" element={<LogoutPage />} /> */}
            <Route path="create-account" element={<div>404: Page Under Construction</div>} />
          </Route>
        </Routes>
      </Router>
    </AppContext.Provider>
  );
}

Answer 2

如果您使用原始锚标记，那么您将需要阻止默认操作。

<a
  onClick={(e) => {
    e.preventDefault();
    navigate("../create-account");
  }}
>
  Create an account
</a>

最好只渲染一个

Link

组件，尽管它已经可以正确处理此行为。您只需要提供您想要导航到的目标路径。

import { Link } from 'react-router-dom';

...

<Link to="../create-account">
  Create an account
</Link>

根据渲染此

LoginForm

的位置，使用相对路径

"../create-account"

可能不正确。如果您需要做的只是导航到

"/create-account"

，那么只需使用绝对路径即可。

<Link to="/create-account">
  Create an account
</Link>