Реагировать маршрут с ID бросков 401 без вложенности

Question

У меня есть проблема с моим приложением реакции, когда я борюсь с настройкой Маршрута с параметрами ID.

Я перебрал разные похожие темы на StackOverFlow, и кажется, что решения не работают для меня , Просто чтобы уточнить, я не пытаюсь делать вложения. Маршрутизация. Мой пример - создать маршрут user /: id, который будет доступен только для пользователя /: id Содержимое с идентификатором было передано или выдать 401 Ошибка, если идентификатор не передан как параметр

Так что мое приложение в настоящее время выглядит так :

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    import React from "react";
    import {BrowserRouter,Switch,Route,Link} from "react-router-dom";

    const App = () =>{
      return (
        <BrowserRouter>
          <div>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/user/1">User 1</Link>
              </li>
            </ul>

            <hr />

            <Switch>
            
              <Route exact path="/">
                <h1>This is Welcome Page</h1>
              </Route>
              
              <Route path="/user/:userId" component={<User>} />
              
            </Switch>
          </div>
        </BrowserRouter>
      )
    }

const User= ({ match }) => (
  <div>
    <h3>User ID: {match.params.userId}</h3>
  </div>
);

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Поэтому, когда я пытаюсь go user / 1, он выдает ошибку 401, я видел аналогичные способы, как разработчики с вложенными маршрутами, но это не то, чего я пытаюсь достичь с помощью своего приложения. Я пытаюсь создать страницу маршрута только для пользователя с заданным параметром ID и выбрасывать 401, только если идентификатор параметра не был передан для маршрута пользователя

Answer 1

1. Сопоставители маршрутов жадные, поэтому вам нужно организовать маршруты от сложного первого до простого последнего.
2. В остальном мы используем множественное число для маршрутизации, поэтому в вашем случае мы можем легко сделать /users route, чтобы показать всех пользователей, и users/:id route, чтобы показать одного пользователя.
3. Так что получается, что даже если у вас есть URL /users/21, он будет соответствовать пути /users, потому что он видит сначала, если вы собираетесь создать страницу для пользователей с /users, поэтому вам следует сначала исправить это.

<Route path="/users/:id">
  <h1>This is user {params.id}</h1>
</Route>

<Route path="/users">
  <h1>This is users page</h1>
</Route>

<Route exact path="/">
  <h1>This is Welcome Page</h1>
</Route>

Так что, если вы не делаете маршрут users и просто показать ошибку, если идентификатор не указан, тогда:

<Route path="/users/:id">
  <h1>This is user {params.id}</h1>
</Route>

<Route path="/users">
  <h1>This is supposed to be an error page if no id is given when under /users</h1>
</Route>

<Route exact path="/">
  <h1>This is Welcome Page</h1>
</Route>