首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >显示两个组件的路由器4交换机

显示两个组件的路由器4交换机
EN

Stack Overflow用户
提问于 2018-12-29 20:40:18
回答 1查看 244关注 0票数 1

我试图将我的路由分割成许多文件,为了实现这一点,我有一个名为路由的中央文件。

代码语言:javascript
复制
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;

然后为所有主要组件创建一个路由文件,如下所示:

代码语言:javascript
复制
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”之外,在任何这些情况下,路由器都会同时显示两个组件。

我想知道如何解决这个问题,或者有一个更好的方法来组织我的路线将是非常感谢的。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-12-29 21:19:26

可以像FuzzyTree建议的那样使用正则表达式,但是在一个更大的项目中,这会变得很混乱。我建议用React.Fragment代替StreamRoutes中的Switch。就像你所期望的那样。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53973187

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档