Question

我想实现以下路径结构

/ -> /home
/home -> /home/dashboard

现在，当从“ /”作为路径进入时，它可以正常工作，并且仪表板组件仅安装一次。据我所知，直接导航到“ / home”时，重定向到“ / home / dashboard”会被重定向到“ / home”所覆盖，因此，不会显示仪表板。

第二个问题是，直接进入“ / home / dashboard”时，Dashboard组件被渲染两次，从而导致异步调用从第一个渲染进入无效状态，并导致典型的“潜在内存泄漏”警告。

组件：

app.js;

function App() {
  return (
    <BrowserRouter>
      <Route path='/' component={Root}/>
    </BrowserRouter>
  );
}

root.js

function Root(props) {
    let isLoggedIn;

    const renderHome = () =>{
        console.log("render home redirect") // debug only
        return <Redirect exact from={"/"} to={"/home"}/>
    }
    isLoggedIn = !!localStorage.getItem("token")
    return <>
        <Switch>
            <Route path={"/welcome"} component={Welcome}/>
            {isLoggedIn &&
            <Route path={"/home"} component={Home}/>
            }
            {(isLoggedIn &&
                renderHome()
            ) ||
            <Redirect from={`${props.match.url}/`} to={"/welcome"}/>
            }
        </Switch>
    </>
}

home.js

function Home(props) {
    return <Switch>
        <Route path={`/home/dashboard`} component={Dashboard}/>
        <Redirect from="/home" to="/home/dashboard"/>
    </Switch>
}

dashboard.js

class Dashboard extends React.Component {

    state = {
    users: []
    }

    componentDidMount() {
        getUserList().then(value =>
            this.setState({users: value})
        )
    }

    render() {
        console.log("dashbaord render")
        const {users} = this.state
        return (<>
            <div>
                UserList
            </div>
        </>
        );
    }
}

当我删除从“ /”到“ / home”的重定向时，直接访问“ / home / dashboard”不会引起内存泄漏警告，并且从“ / home”到“ / home / dashboard”的重定向可以，但是显然没有从“ /”到“ / home”的重定向。

我在重定向中犯了什么错误？

React Router Redirect会覆盖其他路由器组件

0 个答案: