React-Router v4-如何在下拉列表更改时重定向到其他路由

Question

在index.js页面中，我使用一个BrowserRouter组件，其中包含一些Links，Switch和Route子代：

func centralManager(_ central: CBCentralManager, 
                     didDiscover peripheral: CBPeripheral, 
                     advertisementData: [String : Any], 
                     rssi RSSI: NSNumber)

然后我有Home，ComponentA，ComponentB子组件，它们分别在/，/ Aroute，/ Broute上加载，所有这些都非常简单且最小。

首页

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";

import logo from './mylogo-h55.png';    
import Home from "./Home";
import ComponentA from "./ComponentA";
import ComponentB from "./ComponentB";

var initFruit = "bananas";

class App extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        selectedFruit: initFruit,
      }

      this.onFruitChangedHandler = this.onFruitChangedHandler.bind(this);
    }


  onFruitChangedHandler(e) {
    let newFruit = e.target.value;
    console.log("== onFruitChanged; fruit: " + newFruit);

    this.setState({
      selectedFruit: newFruit
    })
  }


  render() {

      const NoMatch = ({ location }) => (
        <div>
          <h3>No match for (index.js) <code>{location.pathname}</code></h3>
        </div>
      )

    return (
      <BrowserRouter>
            <div >
                <div>
                  <nav className="navbar navbar-fixed-top">
                    <span>
                      <img src={logo} alt="logo" />&nbsp;&nbsp;MyApp
                    </span>

                    <div className="container">
                          <div id="navbar">
                              <ul className="nav navbar-nav">
                                <li>
                                  <Link to="/">Home</Link>
                                </li>

                                <li>
                                  <Link to="/Aroute">Component-A</Link>
                                </li>

                                <li>
                                  <Link to="/Broute">Component-B</Link>
                                </li>    
                              </ul>

                              <ul className="nav navbar-nav navbar-right">
                                <li>
             <select id="ctlFruitDropdown" value={this.state.selectedFruit} onChange={this.onFruitChangedHandler}>
               <option value="apples">apples</option>
               <option value="bananas">bananas</option>
               <option value="oranges">oranges</option>
              </select> 
                                </li>
                              </ul>
                          </div>
                    </div>
                  </nav>
                </div>

                <div id="divContent" className="container">
                      <Switch>
                        <Route path="/" exact component={Home} />

                        <Route path="/Aroute" render={()=><ComponentA selectedFruit={this.state.selectedFruit} propDummy={50} />} />

                        <Route path="/Broute" render={()=><ComponentB selectedFruit={this.state.selectedFruit} propExample={100} />} /> 

                        <Route component={NoMatch} />

                      </Switch>
                </div>
            </div>
      </BrowserRouter>
    )
  }
};


ReactDOM.render(<App />
  , document.getElementById("root")
);

ComponentA

import React, { Component } from 'react';

class Home extends Component {
  render() {
    return (
      <div>
        Select an action from the Menu Bar
      </div>
    );
  }
}

export default Home;

ComponentB

import React, { Component } from 'react';


//selectedFruit,propDummy <== passed down from parent.
class ComponentA extends Component {

  constructor(props) {
    super(props);

    let d = new Date();
    let dformatted = [d.getFullYear(), d.getMonth()+1,d.getDate()].join('/')+' '+
       [d.getHours(), d.getMinutes(), d.getSeconds()].join(':');

     this.state = {
         constructedAt      :  dformatted,
         mountedAt: undefined
    };
  }  

  /* **************************************
   *  === lifecyle methods below ===
   * ************************************** */
    componentDidMount() {
        console.log('=== componentDidMount: ComponentA ===')
        let d = new Date();
        let dformatted = [d.getFullYear(), d.getMonth()+1,d.getDate()].join('/')+' '+
        [d.getHours(), d.getMinutes(), d.getSeconds()].join(':');

        this.setState({
            mountedAt: dformatted
        })
    }

    render() {

        return (
            <div>
                <h3>this is ComponentA</h3>
                <p>constructedAt: {this.state.constructedAt}</p>
                <p>mountedAt: {this.state.mountedAt}</p>

                <div>selectedFruit: {this.props.selectedFruit}</div>
                <div>propDummy: {this.props.propDummy}</div>
            </div>
        )
    }
}
export default ComponentA;

我需要什么

每当水果下拉菜单更改时，无论我当前在哪条路线上，都始终重定向到“家”路线/。

将重定向代码确切放置在哪里？

我阅读了文档等，但不知道如何将其应用于我的方案。

import React, { Component } from 'react';

class ComponentB extends Component {
  componentdidMount() {
    console.log('componentdidMount: ComponentB')
  }

  render() {
    console.log(this.props)

    return (
      <div style={{marginTop:50}}>
        <h3>Component-B</h3>

        <div>selectedFruit: {this.props.selectedFruit}</div>
        <div>propExample: {this.props.propExample}</div>

      </div>
    );
  }
}
export default ComponentB;