В моем приложении для реагирования URL-адрес обновляется, но страница не перенаправляется до обновления браузера

Question

Мне нужна помощь. Может кто-нибудь, пожалуйста, дайте мне знать, что здесь находится, всякий раз, когда я нажимаю кнопку на боковой панели навигации, которая называется «Маршруты», адрес страницы в URL-адресе изменяется, но страница не загружается, пока я не обновлю sh из браузера. Я сделал все, что мог . Также моя регистрация обслуживающего персонала тоже работает, я думаю, в этом нет ошибки. Что я делаю не так? Может ли кто-нибудь помочь с этим.

это мой код страниц маршрутизации. 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>

Answer 1

Вам не нужно снова 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> */}

Я только что скопировал два маршрута , вы можете добавить свои остальные маршруты. Использование точное означает другое значение c.

Проблема в вашем коде заключалась в том, что вы использовали лишний Router без необходимости. Надеюсь, у вас работает!

Answer 2

попробуйте это:

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

    );
}