Исключить путь из реакции-роутера - PullRequest
Новая
       13

Исключить путь из реакции-роутера

0 голосов
/ 10 июля 2019

Видите, я пытаюсь настроить приложение реакции-маршрутизатора. У меня есть /parties, список всех партий, а затем /parties/:id, который дает мне страницу с подробной информацией о вечеринке, и /parties/create, где у меня есть форма для создания партии.

Теперь я пытаюсь, чтобы мой основной ресурс всегда был слева от моего экрана, а мой подресурс - всегда справа от моего экрана.

Вот как я это настроил: 

        return <div>
      <div>
        <nav>
          <h1>Gamevote</h1>
          <AuthWidget authService={this.authService}/>
        </nav>
        <div class="content cnt" ref={this.content}>
          <this.PrivateRoute path="/" exact component={() => <Redirect to="/parties"/>} />
          <Route path="/register" exact component={() => <Register/>} />
          <Route path="/login" exact component={() => <Login authService={this.authService}/>} />
          <this.PrivateRoute path="/parties/:selectedParty?" component={this.AutowiredPartyList} />
        </div>
        <div class="big-content cnt" ref={this.bigContent}>
            <this.PrivateRoute path="/party/create" partyService={this.partyService} exact component={() => <this.AutowiredCreateParty/>}/>
            <this.PrivateRoute path="/parties/:party" exact component={PartyView}/>
         </div>
         <this.PrivateRoute path="/logout" exact component={this.Logout}/>
      </div>
    </div>
  }

Но теперь, когда я перехожу на /parties/create, появляется форма создания вечеринки и информация о вечеринке с id party.

Есть ли способ исключить /parties/create из матча /parties/:id?

1 Ответ

0 голосов
/ 10 июля 2019

Если вы хотите, чтобы и /parties/create, и /parties/:id изменили порядок:

path = "/ party / create" (first)

path = "/party /: id "(последний)

Если другой путь с / party /: что-то?существует до того, как он войдет в этот маршрут.

Это потому, что "/parties/:id" соответствует чему-либо после /parties/##### Также обратите внимание, что вам нужно будет добавить компонент Switch, чтобы одновременно отображался только один путь. 

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

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

function About() {
  return <h2>About create</h2>;
}

function AboutId() {
  return <h2>About with ID</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

function AppRouter() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/users/">Users</Link>
            </li>
            <li>
              <Link to="/about/create">About</Link>
            </li>
            <li>
              <Link to="/about/1">About with id</Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route path="/" exact component={Index} />
          <Route path="/users/" component={Users} />
          <Route path="/about/create" component={About} />
          <Route path="/about/:id" component={AboutId} />
        </Switch>
      </div>
    </Router>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<AppRouter />, rootElement);

https://codesandbox.io/s/withered-lake-o9kx4

...