没有刷新 React Router 将无法工作答案

【问题标题】：React Router Won't Work Without Refresh没有刷新 React Router 将无法工作
【发布时间】：2018-02-14 23:31:04
【问题描述】：

基本上，Route组件不会在点击改变路径的Link时触发；但刷新后，会显示正确的组件。什么可以解决问题？

应用组件：

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;

【问题讨论】：

标签： javascript reactjs routing redux

【解决方案1】：

您应该将所有组件包含在 <Router> 中，这将解决您的问题。

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

【讨论】：

问题依然存在，即使通过这些更改，恐怕

【解决方案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>

【讨论】：