переключатель 4 маршрутизатора реакции, показывающий два компонента - PullRequest
Новая
       48

переключатель 4 маршрутизатора реакции, показывающий два компонента

0 голосов
/ 29 декабря 2018

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

import React from "react";
import { Router, Route, Switch } from "react-router-dom";
import history from "./History";
import StreamRoutes from "./stream/StreamRoutes";

const Routes = props => {
  return (
    <React.Fragment>
      <Router history={history}>
        <Switch>
          <Route path="/" exact component={props => <h1>hello world</h1>} />
          <StreamRoutes />
        </Switch>
      </Router>
    </React.Fragment>
  );
};

export default Routes;

, а затем файл маршрута для всех основных компонентов, например, так: 

import React from "react";
import { Route } from "react-router-dom";

import StreamCreate from "./components/StreamCreate";
import StreamEdit from "./components/StreamEdit";
import StreamList from "./components/StreamList";
import StreamShow from "./components/StreamShow";

const StreamRoutes = props => {
  return (
    <React.Fragment>
      <Route path="/streams" exact component={StreamList} />
      <Route path="/streams/new" exact component={StreamCreate} />
      <Route path="/streams/:id" exact component={StreamShow} />
      <Route path="/streams/edit/:id" exact component={StreamEdit} />
    </React.Fragment>
  );
};
export default StreamRoutes;

это работает, за исключением случаев, когда я пытаюсь получить доступ к "/ streams / new" или "/ streams /: id", в любом из этих случаев маршрутизатор показывает оба компонента одновременно.

IХотелось бы узнать, как это исправить, или был бы очень признателен за лучший способ организации моих маршрутов.

1 Ответ

0 голосов
/ 30 декабря 2018

Можно использовать регулярное выражение, как предлагает FuzzyTree, но это может запутаться в большом проекте.Я бы предложил заменить React.Fragment в ваших StreamRoutes на Switch.Таким образом, это работает так, как вы ожидаете.

...