React Router 没有刷新就无法正常工作

Question

基本上，路由组件不会在更改路径的链接单击时触发；但是在刷新后，正确的组件会显示出来。如何解决这个问题？

应用程序组件：

import React, { Component } from 'react';
/**
 * Import Router
 */
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
/**
 * Import custom components
 */
import IndexComponent from '../components/index_component';
import LoginComponent from '../components/login_component';
/**
 * Import containers
 */
import Navbar from '../containers/Navbar';
import Footer from '../containers/Footer';

export default class App extends Component {
  render() {
    return (
        <div>
            <Navbar />
            <Router>
                <Switch>
                    <Route path="/login" component={LoginComponent} />
                    <Route path="/" component={IndexComponent} />
                </Switch>
            </Router>
            <Footer />
        </div>
    );
  }
}

登录组件：

import React, { Component } from 'react';

class LoginComponent extends Component {
    render() {
        return (
            <div>LOGIN COMP</div>
        );
    }
}

export default LoginComponent;

- Moldovan Andrei

Answer 1

你应该将所有组件都包含在<Router>中，这样可以解决你的问题。

<Router>
    <Navbar />
    <Switch>
        <Route path="/login" component={LoginComponent} />
        <Route path="/" component={IndexComponent} />
    </Switch>
    <Footer />
</Router>

- Sivakumar

---

问题仍然存在，即使经过这些变化，我很担心。 - Moldovan Andrei

Answer 2

尝试以下解决方案：

   import React from 'react';
   import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
   import IndexComponent from '../components/index_component';
   import LoginComponent from '../components/login_component';


        <Router>
          <Switch>
             <Route path="/login" component={LoginComponent} />
            <Route path="/" component={IndexComponent} />
          </Switch>
        </Router>

- GibboK