反應路由器將無法工作而不刷新

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; 

Answer 1

你應該附上裏面<Router>所有的組件，這將解決您的問題。

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

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>