React 路由器不会找不到页面

Question

我有一个标题，我想在某些页面上显示。所以我把我想要的页面包裹在 a 周围<></>并且成功了。但“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>            </>            // This never get called...            <Route path='/' component={NotFound}></Route>        </Switch>

Answer 1

我在文档中找不到它，但我的感觉是（我自己测试了它），<></>您的交换机中的 始终评估为 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 2

我认为你需要path完全删除该属性

Answer 3

因为你有两条匹配的路线'/'。将其更改为'/*'匹配所有通配符路由。

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>