Question

这是我在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文件中的路由可以正常工作。

Answer 1

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

Answer 2

这是因为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>

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

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

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

2 个答案: