Question

我有一个要显示在某些页面上的标题。因此，我将想要的页面包装在<></>周围，并且可以正常工作。但是，“未找到”页面现在永远不会显示，并且标题位于空白页面上，而未位于未找到页面上。我在做什么错，该如何解决？

        <Switch>
            <Route path='/login' component={Login}></Route>
            <Route path='/signup' component={SignUp}></Route>

            <>
                <Header />
                <Route path='/cool-page' component={Cool}></Route>
                <Route path='/another-page' component={Another}></Route>

                <Route path='/' exact component={() => <Redirect to='/cool-page'></Redirect>}></Route>
            </>

            // This never get called...
            <Route path='/' component={NotFound}></Route>
        </Switch>

Answer 1

因为您有两条与jmeter(Threads =100 & loop)匹配的路由。将其更改为'/'以匹配所有通配符路由。

Answer 2

我认为您需要一起删除path属性

Answer 3

我在文档中找不到它，但是我的感觉是（并且我自己对其进行了测试）您的交换机中的<></>始终为true，因此它永远不会达到NotFound路线，我的建议是尝试将NotFound组件的全部内容放入`<> ...

内

<Switch>
    <Route path='/login' component={Login}></Route>
    <Route path='/signup' component={SignUp}></Route>

    <>
        <Header />
        <Route path='/cool-page' component={Cool}></Route>
        <Route path='/another-page' component={Another}></Route>

        <Route path='/' exact component={() => <Redirect to='/cool-page'></Redirect>}></Route>
        <Route path='/*' component={NotFound}></Route>
    </>
</Switch>

Answer 4

也许是由于<></>，它没有到达路线的尽头。代替反应片段<></>，尝试一个组件和另一个开关。我尝试了一些组合，并且这个组合有效：

const WithHeader = ({ children }) => {
  return (
    <div>
      <div>Header</div>
      <div>{children}</div>
    </div>
  );
};

<Switch>
    <Route path="/login" component={() => "Login"}></Route>
    <Route path="/signup" component={() => "Sign Up"}></Route>
    <Route path="/404" component={() => "Not Found"}></Route>

    <WithHeader>
        <Switch>
            <Route path="/cool-page" component={() => "Cool Page"}></Route>
            <Route
                path="/another-page"
                component={() => "Another Page"}
            ></Route>
            <Route
                path="/"
                exact
                component={() => <Redirect to="/cool-page"></Redirect>}
            ></Route>
            <Route render={() => <Redirect to="/404" />} />
        </Switch>
    </WithHeader>
</Switch>

在此处查看工作示例：

反应路由器不去找不到页面

4 个答案: