在React Router中的嵌套路由中刷新后看到空白页

时间:2019-12-05 12:22:15

标签: reactjs react-router

这是我在App.js中的主要路由器页面:

<Provider store={store}>
    <Router>
        <Switch>
            <Route exact path = "/" component= {FormPage}></Route>
            <Route  path = "/dashboard" component= {Dashboard}></Route>
        </Switch>
    </Router>
</Provider>

在仪表板页面中:

<Router>
    <Switch>
        <Route  path = "/register" component= {Registration}></Route>
        <Route  path = "/home" component= {Home}></Route>
    </Switch>
</Router>

在寄存器或主页中刷新后,没有任何显示。但是App.js文件中的路由可以正常工作。

2 个答案:

答案 0 :(得分:0)

   <Router>
       <Switch>
          <Route  path = "/dashboard/register" component= {Registration}> 
          </Route>
          <Route  path = "/dashboard/home" component= {Home}></Route>
      </Switch>
    </Router>

答案 1 :(得分:0)

这是因为react无法找到用户导航过的url的历史记录。 基本上react属性会搜索保存在历史记录中的url,但此处开发人员没有使用它。

const history = useHistory();
        <Router  history= {history}>
            <Switch>
                <Route  path = "/register" component= {Registration}></Route>
                <Route  path = "/home" component= {Home}></Route>
            </Switch>
        </Router>

要解决此问题,请遵循以下三个步骤,并请参考上面的代码。

  1. 这样的导入历史从“ react-router-dom”导入{useHistory};
  2. 分配给这样的变量,例如 const history = useHistory();
  3. 在主div /路由器中使用它,所有组件都包裹在其中