Проблема с параметрами URL в React Router - PullRequest
Новая
       38

Проблема с параметрами URL в React Router

1 голос
/ 21 марта 2020

У меня есть профиль пользователя и маршрут:

<Route path="/profile/:username" component={UserProfile} />

Ссылка на go на профиль пользователя находится в заголовке, например: 

<Link to={`/profile/${props.username}`}>
   <strong>{props.username}</strong> 
</Link>

Итак, URL профиля - localhost:3000/profile/username

Есть еще один компонент UserPosts. В профиле пользователя есть ссылка, при нажатии на которую отображается лента пользователя. Теперь я хочу, чтобы URL был похож на locahost:3000/profile/username/posts

Как должен выглядеть мой реагирующий компонент Route? Дело в том, что я получаю сообщения пользователя по id.

Внутренний маршрут: /posts/:id

И как мой Link должен выглядеть на компоненте UserProfile? 

<Link to="">
   My Posts
</Link>

И как мне установить мои маршруты. Вот мой App.js на данный момент. 

      <div>
          <Router>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/register" component={SignUp} />
              <Route path="/login" component={Login} />
              <PrivateRoute
                path="/post/create"
                component={NewPost}
              />
              <Route path="/profile/:username" component={UserProfile} />
              <Route component={NotFound} />
            </Switch>
          </Router>
        )}
      </div>
    ```
...