Question

我在我的项目中使用react-router-dom“ ^ 4.3.1” lib，我有一个登录页面和管理页面。登录过程之后，我想在管理页面中路由主页（history.push（'/ home'）;），但浏览器呈现空白页面。我该如何解决这个问题？

我的主路由器。

 <Router history={history}>
       <Switch>
             <Route path="/register" name="Register Page" component={Register}/>
             <Route path="/404" name="Page 404" component={Page404}/>
             <Route path="/500" name="Page 500" component={Page500}/>
             <Route path="/home" name="Home" component={Full}/>
             <Route path="/" name="Login" component={Login}/>
        </Switch>
  </Router>

全部组件内容：

  <div className="app">
                    <Header/>
                    <div className="app-body">
                        <Sidebar {...this.props}/>
                        <main className="main">
                            <Breadcrumb/>
                            <Container fluid>
                                <Switch>
                                    <Route path="/dashboard" name="Dashboard" component={Dashboard}/>
                                    <Route path="/applications" name="Applications" component={Applications}/>
                                    <Route path="/roles" name="Roles" component={Roles}/>
                                    <Route path="/poc" name="poc" component={Poc}/>
                                    <Redirect from="/home" to="/dashboard"/>
                                </Switch>
                            </Container>
                        </main>
                        <Aside/>
                    </div>
                    <Footer/>
                </div>

你能帮我吗？

Answer 1

我尝试this.props.history.push（'/ home'）;代码部分，但运行不正确。

您可以在下面看到我的组件代码。我完整的组件代码：

class Full extends Component {
    render() {
        return (
            <div className="app">
                <Header/>
                <div className="app-body">
                    <Sidebar {...this.props}/>
                    <main className="main">
                        <Breadcrumb/>
                        <Container fluid>
                            <Switch>
                                <Route path="/dashboard" name="Dashboard" component={Dashboard}/>
                                <Route path="/applications" name="Applications" component={Applications}/>
                                <Route path="/roles" name="Roles" component={Roles}/>
                                <Route path="/poc" name="poc" component={Poc}/>
                                <Redirect from="/home" to="/dashboard"/>
                            </Switch>
                        </Container>
                    </main>
                    <Aside/>
                </div>
                <Footer/>
            </div>
        );
    }
}
Dashboard component code :

class Dashboard extends Component {
  constructor(props) {
    super(props);
  }
  render() {

    return (
      <div className="animated fadeIn">
        <div>test</div>
      </div>
    )
  }
}

export default Dashboard;

历史代码：

import {createBrowserHistory} from 'history';
export const history = createBrowserHistory();

反应路由器空白页

1 个答案: