使用 'exact' 时子组件内部的路由不起作用：ReactJs

Question

我创建了一个包含 3 个主要项目的简单项目 components/pages。

主页（路径：“/”）是登录页面。一旦我们点击登录按钮，将创建一个动态 URL "admin/random_num LogIn.js

import { Link, Route } from "react-router-dom";
import Dashboard from "../Admin/Dashboard";

export default function Login(props) {
  return (
    <div>
      <h1>Login form</h1>
      <Link to={`/admin/${Math.random()}`}>Login Button</Link>
      <Route path="/admin/:aid" component={Dashboard} />
    </div>
  );
}

2nd component/page是admin(path: "/admin/randum_num" , eg: "/admin/132")，点击登录页面的登录按钮时应该显示。 Admin.js


export default function Dashboard(props) {
  return (
    <div>
      <h1>Admin Dashboard</h1>
    </div>
  )
}

第三个组件是404page，当没有匹配到路由时会简单显示。 Error404.js


export default function Error404() {
  return (
    <div>
      <h1>404</h1>
    </div>
  )
}

最后一点，在 App.js 我正在设置路由。 App.js

import React from 'react'
import './App.css';
import Error404 from './pages/Error404';
import Login from './pages/StartingScreen/Login';

function App() {
  return (
    <BrowserRouter>
    <div className="App">
      <Switch>
        <Route exact path="/" component={Login} />
        <Route  component={Error404} />
      </Switch>
    </div>
    </BrowserRouter>
  );
}

export default App;

注意：如果我在 Route 语句中删除“exact”参数，我可以显示管理仪表板页面，但在删除“exact”后，登录和仪表板页面都将可见我不想要。我希望在给定路线上只能看到一个组件。

一周以来我一直在努力寻找关于这个问题的答案，请帮忙。如果给定的细节不完整，请告诉我。

Answer 1

由于您使用 exact 作为您的登录组件，这意味着您的 Login 组件将只呈现根路径 /.

并且您的 Dashboard 组件在您的 Login 组件内，这意味着您还需要将 "/admin/:aid" 添加到您的登录路径。

你需要改变这个

<Route exact path="/" component={Login} />

至

<Route exact path={["/", "/admin/:aid"]} component={Login} />

更新： 要隐藏登录按钮，您可以在 Login 组件

中使用另一个 Switch

export default function Login(props) {
  return (
    <div>

      <Switch>
        <Route exact path="/">
          <h1>Login form</h1>
          <Link to={`/admin/${Math.random()}`}>Login Button</Link>
        </Route>
        <Route exact path="/admin/:aid" component={Dashboard} />
      </Switch>

    </div>
  );
}

使用 'exact' 时子组件内部的路由不起作用：ReactJs

Routing inside subcomponents not working while using 'exact' : ReactJs

nested-routes

reactjs

react-router