имя_реагирующего маршрутизатора location.pathname, такое как / users /, которое соответствует обоим / users / profile и / users / details./ пользователи / * если вы можете

Question

Я использую реагирующий маршрутизатор для программной навигации в моем приложении. Все нормально для этой новой функции, которую я хочу добавить, которая требует условной маршрутизации.

Мне нужно визуализировать, например, profileRoutes, когда местоположение - /users/profile и somethingElse, когда местоположение - /users/details, например. Код ниже пока работает нормально, так как у меня только встроенные profileRoutes. Но я объединил маршруты в один, и мне нужно /users/* или что-то в этом роде, чтобы это местоположение совпадало со всеми маршрутами, связанными с / users / ...

    <Route
    children={({ location }) => (
    <div>
    {
    location.pathname === "/users/profiles" ?
    <profileRoutes></profileRoutes> :
    <otherComponent/>
    }
    </div>
    )}
    />

Мой вопрос: есть ли способ реакции-маршрутизатора для достижения этой цели? как location.pathname.startswith.... что-то вроде?

Answer 1

Спасибо, что указали мне правильное направление, то есть использовали совпадение! Мне не нужно было изменять мои маршруты (я хотел бы разделить свои компоненты и просто импортировать вместо них. У меня есть точный тег на корневом компоненте /. Вот что сработало для меня:

<Route
    children={({ match }) => (
    <div>
    {
    match.path == "/users" ?
    <profileRoutes></profileRoutes> :
    <otherComponent/>
    }
    </div>
    )}
    />

Теперь, когда match.path == "/users" равно true, все маршруты вниз по течению, то есть /users/etc отображаются. Надеюсь, это поможет кому-то еще!

Answer 2

Для ваших требований, пожалуйста, используйте параметр exact.

Для соответствия /users или /users/profiles или /users/what-ever:

<Route path="/users" component={Users} />

Только для сопоставления /users

<Route exact path="/users" component={Users} />

В принципе, давайте сделаем следующее:

1. В главном компоненте используйте Route без exact, чтобы указать на компонент Users
2. В компоненте Users, снова введите Route для соответствия подкомпоненты Users

Вот пример:

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

export function RouterExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>Main Menu:</li>

          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/users">Users</Link>
          </li>
        </ul>

        <hr />

        <Route exact path="/" component={Home} />
        <Route path="/users" component={Users} />
      </div>
    </Router>
  );
}

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

function Users({ match }) {
  return (
    <div>
      <h2>Welcome to Users</h2>
      <ul>
        <li>Users menu:</li>
        <li>
          <Link to={`${match.url}/profiles`}>User Profiles</Link>
        </li>
        <li>
          <Link to={`${match.url}/settings`}>User Settings</Link>
        </li>
      </ul>

      <Route exact path={`${match.path}`} component={UserHome} />
      <Route path={`${match.path}/profiles`} component={UserProfiles} />
      <Route path={`${match.path}/settings`} component={UserSettings} />

      <Route path={`${match.path}/:section`} component={UserFooter} />
    </div>
  );
}

function UserHome() {
  return (
    <div>
      <h3>UserHome Component</h3>
    </div>
  );
}
function UserProfiles() {
  return (
    <div>
      <h3>UserProfiles Component</h3>
    </div>
  );
}
function UserSettings() {
  return (
    <div>
      <h3>UserSettings Component</h3>
    </div>
  );
}

function UserFooter({ match }) {
  return (
    <div>
      <hr />
      UserFooter Component is always visible under /users/*
      <br />
      You are now at
      <br />
      path: {match.path}
      <br />
      match params: {match.params.section}
    </div>
  );
}

Демонстрация в реальном времени на codesandbox