Question

假设我有一个如下所示的路由切换语句：

render () {
    <pre>
        <Switch>
            <Route path="/foo" render={render}>
            <Route path="/bar" render={renderBar}>
            <Route path="/" render={renderHome}>

            {/* How do i express everything except the home page ?*/}

            <Route render={renderFourOhFour}>
        </Switch>
    </pre>
}

如何编写排除除上述示例之外的所有内容以外的所有内容的路由？我只是写一个正则表达式吗？如果是这样，我尝试了类似

的东西

path={^(?!.*(home))}

使用regex react router v4 tester：https://pshrmn.github.io/route-tester/#/

Answer 1

您可以在Route上使用render方法，该方法将作为道具传递到该位置。所以：

<Route render={({location}) => {
  return location.pathname !== '/' ? <p>Not home</p> : ''
}} />

Answer 2

在反应路由器4中，没有明确的方法。我以一种将switch语句作为堆栈或队列的方式重新设计它。

它会将前几个路线组件作为首选，您必须将最后一个项目作为默认项目。

例如：

<Route path="/" exact component={Home}/>
<Route path="/will-match" component={WillMatch}/>
<Route component={NoMatch} />

Answer 3

1）除/home

之外，其他任何地方都可见

<Route path={/\/(?!home)/} component={Component} />

2）除/

之外的所有地方

<Route path={/^.{2,}$/} component={Component} />

在反应路由器4中，如何使用正则表达式来否定路由/路径？

3 个答案: