在我的react应用中，url更新了，但页面没有重定向，直到浏览器刷新。

Question

我需要帮助。谁能让我知道这里的问题是什么，每当我按下侧导航上的 "Routes "按钮时，url中的页面地址就会改变，但页面不会加载，直到我从浏览器刷新。我已经尽力了。另外我的serviceworker注册也在工作，我想没有错误，我到底做错了什么？

这是我的路由页面的代码。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);

`

Loading.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>

Answer 1

试试这个。

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

    );
}

Answer 2

你不需要 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 不必要的。我希望，它对你有用!