1

我需要帮助。有人可以让我知道这里的问题是什么，每当我按下侧面导航上的“路由”按钮时，url中的页面地址会发生变化，但在我从浏览器刷新之前页面不会加载。我尽我所能。还有我的服务工作者注册也在工作我想这没有错误。我做错了什么？谁能帮忙解决这个问题。

这是我的路由页面代码。index.js

import swConfig from '../swConfig'
import * as serviceWorker from '../serviceWorker';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
    ReactDOM.render(

   <Router>

    <Switch>
     <Route exact path="/" component={Login} />
     <Route component={Loading}/>
    </Switch>

   </Router>,
   document.getElementById('root')
   );
   serviceWorker.register(swConfig);

`

加载.js

export default class Loading extends React.Component {
constructor(props) {
    super(props);
    this.state = {
      user: null
    };
  }
componentDidMount() {
    firebase.auth().onAuthStateChanged(user => {
        if (user) {
            this.setState({user})
          }
    });
}

render() {
    return (
        <div >
        {this.state.user ?
        <App/> :
        <Login/>}
        </div>

    );
}

}

应用程序.js

    <div className="flexible-content">
      <TopNavigation />
      <SideNavigation />
      <main id="content" className="p-5">
        <Routes />
      </main>
    </div>

路线

  <Router>
      <div>
      <Switch>
         <Route exact path='/DashboardPage' component={DashboardPage} />
         <Route path='/StudentRecord' component={StudentRecord}/>
         <Route path='/VendorReg' component={VendorReg}/>
         <Route path='/VendorRec' component={VendorRecord}/>
         <Route path='/Edit/:id' component={Edit} />
        <Route path='/SpecificTransaction/:id' component={SpecificTransaction}/>
        <Route path='/create' component={create} />
        <Route path='/Show/:id' component={Show} />
        <Route path='/Transaction' component={Transaction} />
        <Route path='/Topup/:id' component={Topup} />
        <Route path='/Vendor' component={Vendor} />
        <Route path='/Payment' component={Payment} />
        <Route path='/pay/:id' component={pay} />
       </Switch>
     </div>
  </Router>
4

2 回答 2

0

尝试这个：

render() {
    return (
        <div >
        {this.state.user ?
        <Redirect to="/app" /> :
        <Redirect to="/login" />}
        </div>

    );
}
于 2020-05-07T03:14:27.977 回答
0

您不再需要Router在应用嵌套路由的组件中。因此，您的Routes组件应如下所示：

Routes.jsx（或 .tsx）文件：

{/* <Router> : NOT NEEDED */}
<div>
  <Switch>
    {/* You can keep or remove "exact" form all these routes */}
    <Route exact path="/DashboardPage" component={DashboardPage} />
    <Route exact path="/StudentRecord" component={StudentRecord} />
  </Switch>
</div>
{/* </Router> */}

我刚刚复制了两条路线，您可以添加其余路线。使用精确是一个不同的主题。

您的代码中的问题是您Router不必要地使用了额外的。我希望这个对你有用！

于 2020-05-07T18:26:10.083 回答