输入不存在的URL时,我尝试呈现组件。但是,该组件会在所有路径中保持渲染。我正在使用[email protected]。这是我设置的路线:
[email protected]
import * as React from "react"; import { Route, RouteComponentProps } from "react-router-dom"; import glamorous from "glamorous"; import ElementList from "./elementlist"; import AddElement from "./addelement"; import NotFound from "./NotFound"; const Styling = glamorous.div({ minHeight: 5, minWidth: 8 }); const NavRouter = () => ( <Styling> <Route path="/" exact={true} component={ElementList} /> <Route path="/addelement" component={(props: RouteComponentProps<{}>) => ( <AddElement onSubmitSuccess={() => props.history.push("/")} /> )} /> <Route path="*" exact={true} component={NotFound}/> </Styling> ); export default NavRouter;
这是我的NotFound组件:
NotFound
import * as React from "react"; const NotFound = () => ( <h1>The page that you are looking is not there.</h1> ); export default NotFound;
我当前面临的问题是消息:更改URL时The page that you are looking is not there.,在/和/addelement路由上不断弹出。我很难使消息仅在未定义的路线上显示。最初,我尝试切换路线,并在顶部创建更“详细”的路线,如下所示:
The page that you are looking is not there.
/
/addelement
const NavRouter = () => ( <Styling> <Route path="/addelement" component={(props: RouteComponentProps<{}>) => ( <AddElement onSubmitSuccess={() => props.history.push("/")} /> )} /> <Route path="/" exact={true} component={ElementList} /> <Route path="*" component={NotFound}/> </Styling> );
但是,它没有解决问题。有没有一种方法可以防止消息出现在我去的每条路由上(未定义的路由除外)?
您应该使用<Switch>组件。根据文档:
<Switch>
这与仅使用一堆<Route>s有何不同? <Switch>独特之处在于它 专门 绘制一条路线。相反,每个<Route>与位置匹配的结果都 包含在内 。考虑以下代码: <Route path="/about" component={About}/> <Route path="/:user" component={User}/> <Route component={NoMatch}/> 如果URL是/about,则<About>,<User>和<NoMatch>将全部呈现,因为它们都与路径匹配。这是设计使然,允许我们以<Route>多种方式将s 组合到我们的应用程序中,例如侧边栏和面包屑,引导程序标签等。 但是,有时我们只想选择一个<Route>进行渲染。如果我们在,/about我们也不想匹配/:user(或显示“ 404”页面)。
<Route>
<Switch>独特之处在于它 专门 绘制一条路线。相反,每个<Route>与位置匹配的结果都 包含在内 。考虑以下代码:
<Route path="/about" component={About}/> <Route path="/:user" component={User}/> <Route component={NoMatch}/>
如果URL是/about,则<About>,<User>和<NoMatch>将全部呈现,因为它们都与路径匹配。这是设计使然,允许我们以<Route>多种方式将s 组合到我们的应用程序中,例如侧边栏和面包屑,引导程序标签等。
/about
<About>
<User>
<NoMatch>
但是,有时我们只想选择一个<Route>进行渲染。如果我们在,/about我们也不想匹配/:user(或显示“ 404”页面)。
/:user
因此,从导入react-router-dom:
react-router-dom
import { Route, RouteComponentProps, Switch } from 'react-router-dom';
然后像这样应用它(请注意,不需要path="*"):
path="*"
<Switch> <Route path="/" exact={true} component={ElementList} /> <Route path="/addelement" component={(props: RouteComponentProps<{}>) => ( <AddElement onSubmitSuccess={() => props.history.push("/")} /> )} /> <Route component={NotFound}/> </Switch>