Question

我在组件的 if else 中有一个重定向代码，我需要在应用程序决定下一步之前首先验证用户。在这种情况下，用户已经进入，他需要被重定向到一个名为“EventEnd”的组件，并带有“事件已结束，很快再来”的消息。

请注意，代码 <Redirect/> 更改了浏览器中的 url，只是页面为空/空白，并且在调试过程中它没有在我的 EventEnd 组件中运行，所以它完全不会去那里。此外，如果我像这样在浏览器中手动输入 url，它会按照我的意愿呈现页面。 http://localhost:3000/0c546bbcc435cd3cb2751e4e5e36956fd9248136/event-end

这是我尝试重定向的代码 - 都不起作用。

 import React, { useEffect, useState } from "react";


const RouteUserToEventPage: React.FC<{}> = (props: any)  => {
  .........
  const location = useLocation();
  useEffect(() => {
    if (eventId)
    {
      getUserStatus(); //this is where I set the eventStatus
    } 
  }, [location])
  
  if (eventStatus === status.Late) {
    return (
      
      <Redirect exact
          to={{ pathname: `/${eventId}/event-end`}}
      />
    )}
  else {
    return <>test page</>
  }

  
};

export default RouteUserToEventPage;

这是我的路由文件 index.tsx

 export const PrivateRoutes: React.FC<any> = (props: any) => {
    
        const appModel = props.appModel;
        const hasEventInfo:boolean = appModel.event.value && appModel.event.value.event_id? true: false;
    
        if (!hasEventInfo){
            return <Event.RouteUserToEventPage {...props} appModel={appModel}></Event.RouteUserToEventPage>
        }
    
      return (
        <Switch>
         
          <Redirect to="/:eventId/event-end" />
          <Route path="/:eventId/event-end" exact component={EventEnd} />
        .....
          <Route component={PageNotFound} path="/page-not-found" />
          <Redirect to="/page-not-found" />
        </Switch>
      );
    };

我尝试过但都不起作用的事情：

我也尝试添加 export default withRouter(RouteUserToEventPage)

我也试过返回一个按钮，然后我可以点击重定向

我已将此添加到我的路由文件中：

  <Route
          path={[ '/:eventId/event-end']}>

  <Switch>
         
          <Redirect to="/:eventId/event-end" /> -- originally wasnt there but i added this at some point coz of trial and error
          <Route path="/:eventId/event-end" exact component={EventEnd} />
     </Switch>
<Route/>

我添加了 exact，我从重定向代码中删除了 push 我做了一个非常简单的 btn 调用它（调用另一个加载的组件，如果我放入 Link to={{...}} 只是为了测试其他组件（因为我认为可能是我的组件有问题），但这也不起作用重定向

  const redirectTest = () => {
    let id = "0c546e346cd00dace9dcf18f8389adb537c12c85";
    <Redirect push to={{ pathname: `/some-settings/${id}`}}
     />
  }

请。不要建议历史，因为它不适用于此。此外，我无法使用 btn 单击，即使我使用了，示例 redirectTest 也不起作用。

我在这里错过了什么？到目前为止，这是我的一整天。

更新：

  import React, { useState, useEffect } from "react";
    import ReactDOM from "react-dom";
    import "./index.css";
    import App from "./App";
    import reportWebVitals from "./reportWebVitals";
    import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
    import store from "./store/store";
    import { Provider } from "react-redux";
    import * as agent from "./utils/agent";
    import * as actionCreators from "./store/actionCreators";
    import { useDispatch } from "react-redux";
    import { TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody, TableFooter, TablePagination } from "@material-ui/core";
    ReactDOM.render(
      <Provider store={store}>
        <Router>
          <Switch>
          
            <Route path="/:organization" component={App} />
            <Route
              component={() => {
                const [organizations, setOrganizations] = useState<organization[]>(
                  []
                );
    
                const dispatch = useDispatch();
    
                const getAllOrganizations = () => {
                  ......
                };
                useEffect(getAllOrganizations, [dispatch]);
                return (
                  <>
                 
                   
                    <TableContainer component={Paper} className={"organizations-list"}>
                     .............
                    </TableContainer>
                  
                  </>
                );
              }}
            />
          </Switch>
        </Router>
      </Provider>,
      document.getElementById("root")
    );
    
    reportWebVitals();

reactjs路由重定向更改url但不呈现页面，页面为空

0 个答案: