时间戳

首页 > 解决方案 > 我想对路由器做出反应以呈现新页面

javascript - 我想对路由器做出反应以呈现新页面

问题描述

我让这段代码按预期工作（有点）

**App.js**
import React from "react";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import "./App.css";
import MyForm from "./Recpayfrm";
function App() {
  return (
    // Code taken from https://reactrouter.com/web/guides/quick-start
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/Recpayfrm">MyForm</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
          renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/Recpayfrm">
            <MyForm />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}
function Home() {
  return <h2>Home</h2>;
}
function Users() {
  return <h2>Users</h2>;
}
export default App;

但是当点击链接 MyForm 时，结果显示在底部（即 HOME 区域）。我想要一个新的页面来呈现/显示。请参阅图片中的输入字段。

如何在 Recpayfrm.js 中呈现/显示组件 MyForm 的新页面？ 在此处输入图像描述

标签： javascriptreactjsreact-router

解决方案

例如，您可以封装所有需要在“主页区域”（具有导航栏列表）中的路由HomeComponent。
而那些在外面需要一个“新鲜页面”的人，就像这样：

// Every route here will also contain the navbar
function HomeComponent() {
  return (
    <div>
        <nav>
            <ul>
                <li>
                    <Link to="/">Home</Link>
                </li>
                <li>
                    <Link to="/Recpayfrm">MyForm</Link>
                </li>
                <li>
                    <Link to="/users">Users</Link>
                </li>
            </ul>
        </nav>

        <Switch>
            <Route path="/users">
                <Users/>
            </Route>
            <Route path="/">
                <Home/>
            </Route>
        </Switch>
    </div>
  )
}

现在在您的App组件中，您将添加所有需要在自己的页面中呈现的路由：

function App() {
  return (
    <Router>
        <Switch>
            <Route path="/Recpayfrm">
                <MyForm/>
            </Route>
            <Route path="/">
                <HomeComponent/>
            </Route>
        </Switch>
    </Router>
  )
}

这是在行动

推荐阅读