我试图将我的路由分割成许多文件,为了实现这一点,我有一个名为路由的中央文件。
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”之外,在任何这些情况下,路由器都会同时显示两个组件。
我想知道如何解决这个问题,或者有一个更好的方法来组织我的路线将是非常感谢的。
发布于 2018-12-29 21:19:26
可以像FuzzyTree建议的那样使用正则表达式,但是在一个更大的项目中,这会变得很混乱。我建议用React.Fragment代替StreamRoutes中的Switch。就像你所期望的那样。
https://stackoverflow.com/questions/53973187
复制相似问题