Реагируйте, управляйте другой историей маршрутизатора

Question

У меня есть BrowserRouter, обслуживающий /, / login и / logout на моем веб-сайте. При входе в систему вы получаете доступ к приложению с одинаковой панелью навигации на каждой странице и динамическим содержимым c, которое содержит данные / функциональные возможности. Этот компонент шаблона "Main" имеет HashRouter для обслуживания различных страниц приложения.

Я добавил поисковую форму в свою панель навигации "CMNav", но я застрял, используя историю для перенаправления, когда пользователь проверяет форма.

CMNav обращается к истории BrowserRouter благодаря withRouter, но не может видеть историю HashRouter, поскольку он был определен на том же уровне.

Поэтому, когда я печатаю поиск и нажмите клавишу ввода, мой URL-адрес изменится на / search, но перенаправление на компонент поиска не выполнено (так как я играю с неправильным объектом истории).

Любая помощь в том, как решить эту проблему?

Моя точка входа - индекс. js.

index. js

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

import Main from "./Main";
import Login from "./auth/login";
const Router = require("react-router");
const auth = require("./auth/auth");

ReactDOM.render(
  <div>
    <BrowserRouter history={Router.browserHistory}>
      <Switch>
        <Route
          path="/login"
          render={() => (auth.loggedIn() ? <Redirect to="/" /> : <Login />)}
        />
        <Route
          path="/logout"
          render={() => {
            auth.logout();
            return <Redirect to="/login" />;
          }}
        />
        <Route
          path="/"
          render={() => (auth.loggedIn() ? <Main /> : <Redirect to="/login" />)}
        />
      </Switch>
    </BrowserRouter>
  </div>,

  document.getElementById("root")
);

Когда пользователь входит в систему, он перенаправляется на "/" и вызывается компонент "Main".

Main.jsx

import React, { Component } from "react";
import { HashRouter, Route } from "react-router-dom";

import Home from "./pages/Home";
import Search from "./pages/Search";

import CMNav from "./components/cm-nav";

class Main extends Component {
  constructor(props) {
    super(props);

    this.state = {};

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

  componentDidMount() {
    // Do things
  }

  render() {
    return (
      <div>
        <div className="container-fluid">

          <CMNav />

          <HashRouter>
            <div>
              <Route exact path="/" component={Home} />
              <Route path="/search" component={Search} />
            </div>
          </HashRouter>
        </div>
      </div>
    );
  }
}

export default Main;

cm-nav.jsx

import React, { Component } from "react";
import { withRouter } from 'react-router-dom';
import { MenuItem, Nav, Navbar, NavDropdown, NavItem } from "react-bootstrap";

import TextInput from "./text-input";

class CMNav extends Component {
  constructor(props) {
    super(props);

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

  navSearchCallback(searchedText) {
    // Meant to be a prop
    this.props.history.push({
      pathname: "/#/search",
      state: { searchedText: searchedText }
    });
  }

  render() {
    return (
      <Navbar collapseOnSelect fluid>
        <Navbar.Header>
          <Navbar.Brand>
            <a href="#">
              <img
                className={"img-thumbnail img_logo_small"}
                src={"images/logo.png"}
                data-holder-rendered="true"
              />
            </a>
          </Navbar.Brand>
          <Navbar.Toggle />
        </Navbar.Header>

        <Navbar.Collapse>
          <Nav>
            <NavItem eventKey={1} href="#search"> Recherche </NavItem>
          </Nav>

          <Nav pullRight>
            <NavItem eventKey={1}> <TextInput callback={(param) => {this.navSearchCallback(param)}}/> </NavItem>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    );
  }
}

export default withRouter(CMNav);

Answer 1

Неважно, ответ так же прост, как поместить CMNav в HashRouter ....

      <HashRouter>
        <div>
          <CMNav />

          <Route exact path="/" component={Home} />
          <Route path="/search" component={Search} />
        </div>
      </HashRouter>

Answer 2

Я бы посоветовал сделать следующее:

1. Убедитесь, что ваши зависимости обновлены, в частности, response и router-router-dom
2. Если вы используете самую последнюю версию Реактивного маршрутизатора вам не нужно импортировать или использовать пакет реагирующего маршрутизатора. Вы должны импортировать компоненты маршрутизатора с

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

Прочтите документацию, пакетact-router-dom существует уже некоторое время и хорошо документирован, а также испытан в бою на производстве. Следующая ссылка имеет отличный пример введения: https://reacttraining.com/react-router/web/example/basic. Вы также должны прочитать разделы withRouter и history. Вы можете удалить следующий компонент prop, поскольку, по крайней мере, в самой последней версии response-router-dom он является избыточным: <BrowserRouter **history={Router.browserHistory}**>