Question

我在我的网站上有一个BrowserRouter服务/，/ login和/ logout。登录后，您可以访问每个页面上具有相同导航栏和包含数据/功能的动态内容的应用程序。模板组件“ Main”具有一个HashRouter，可为应用程序的不同页面提供服务。

我在导航栏“ CMNav”中添加了搜索表单，但是当用户验证表单时，我一直使用历史记录进行重定向。

由于有了withRouter，CMNav可以访问BrowserRouter的历史记录，但是无法看到HashRouter的历史记录，因为他是在同一级别定义的。

因此，当我键入搜索并按Enter键时，我的URL更改为/ search，但未完成对搜索组件的重定向（因为我正在使用错误的历史记录对象）。

有关如何解决此问题的帮助吗？

我的入口是index.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.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

我建议您执行以下操作：

确保您的依赖项是最新的，特别是react和react-router-dom
如果您使用的是最新版本的react-router-dom，则无需导入或使用react-router软件包。您应该使用

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

阅读文档，react-router-dom软件包已经存在了一段时间，并且有充分的文档记录，并且已经在生产中进行了测试。以下链接有一个很棒的介绍示例：https://reacttraining.com/react-router/web/example/basic。您还应该阅读withRouter和history部分。
您可以删除以下组件prop，因为至少对于最新版本的react-router-dom来说，它是多余的：<BrowserRouter **history={Router.browserHistory}**>

Answer 2

没关系，答案就像将CMNav放在HashRouter中一样简单。

      <HashRouter>
        <div>
          <CMNav />

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

反应，管理不同的路由器历史记录

2 个答案: