带有选项卡的错误 React 路由重定向

Question

我做了一个错误页面，如果路由不正确，我会重定向到它。但是当我在 localhost 中打印错误时，浏览器不会重定向到错误页面。

const allTabs = ["/", "/mylist"];

 <BrowserRouter>  <Route
            path="/"
            render={({ location }) => (
              <>
                <AppBar position="static">
                  <Tabs                  
                    value={location.pathname}
                  >
                    <Tab
                      label="Activity"
                      value="/"
                      component={Link}
                      to={allTabs[0]}
                    />
                    <Tab
                      label="My List"
                      value="/mylist"
                      component={Link}
                      to={allTabs[1]}
                    />
                  </Tabs>
                </AppBar>
                <Switch>
                  <Route path={allTabs[1]} render={() => <MyList />} />
                  <Route
                    path={allTabs[0]}
                    render={() => (
                      <MainPage/>
                    )}
                  ></Route>
                  <Route path="/error" component={ErrorComponent} exact />
                  <Redirect to="/error" />

                </Switch>
              </>
            )}
          />
      </BrowserRouter>

Answer 1

我可以通过持续到 App 组件的主要路径来解决我的问题。并使用选项卡创建组件。