Question

我的 App.js：

<Router>
 <Header/>
 <Switch>
    <Route exact path="/" component={HomeScreen} />
    <Route exact path="/screenOne" component={OneScreen} />
    <Route exact path="/screenTwo" component={TwoScreen} />
 </Switch>
</Router>

<Header /> 具有指向相应组件的三个链接，即。主屏幕、单屏幕、双屏幕。

我希望我的 <TwoScreen /> 与这个 baseComponent（即 App.js）完全一样，其中我有一些链接，当我点击这些链接时，与链接/路径对应的组件会被呈现。

解决这个问题的最佳方法是什么？

Answer 1

react-router 站点上有一个例子可以满足你的需求，在嵌套下，你可以查看https://reactrouter.com/web/example/nesting (for just web)

但对我来说，我只是将它们全部声明在一个地方/组件中，尤其是在 react-router-native 上，如果您正在执行 react-native。以下是他们网站的示例

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams,
  useRouteMatch
} from "react-router-dom";

// Since routes are regular React components, they
// may be rendered anywhere in the app, including in
// child elements.
//
// This helps when it's time to code-split your app
// into multiple bundles because code-splitting a
// React Router app is the same as code-splitting
// any other React app.

export default function NestingExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/topics">Topics</Link>
          </li>
        </ul>

        <hr />

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/topics">
            <Topics />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function Topics() {
  // The `path` lets us build <Route> paths that are
  // relative to the parent route, while the `url` lets
  // us build relative links.
  let { path, url } = useRouteMatch();

  return (
    <div>
      <h2>Topics</h2>
      <ul>
        <li>
          <Link to={`${url}/rendering`}>Rendering with React</Link>
        </li>
        <li>
          <Link to={`${url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${url}/props-v-state`}>Props v. State</Link>
        </li>
      </ul>

      <Switch>
        <Route exact path={path}>
          <h3>Please select a topic.</h3>
        </Route>
        <Route path={`${path}/:topicId`}>
          <Topic />
        </Route>
      </Switch>
    </div>
  );
}

function Topic() {
  // The <Route> that rendered this component has a
  // path of `/topics/:topicId`. The `:topicId` portion
  // of the URL indicates a placeholder that we can
  // get from `useParams()`.
  let { topicId } = useParams();

  return (
    <div>
      <h3>{topicId}</h3>
    </div>
  );
}

如何在路由组件内使用路由器

1 个答案: