Question

我的导航组件代码

import { BrowserRouter as Router, Link } from "react-router-dom";
<Router>
        <header>
          <ul className="social">
            {/* Couldn't figure this out */}
            {/* Link doesn't route properly but a href does */}
            <li>
              <Link to="/"> 
              !Home
              </Link>
            </li>
            <li>
              <a href="/">Home</a>
            </li>
</header>
</Router>

标签可用于加载网页，但标签无效。

我定义了HashRouter和Switch的类。调用“！Home”时，它不会在chrome / firefox控制台中加载，也不会输出任何内容，但是href“ Home”中的相同链接有效并加载了页面。

<HashRouter>
          <Switch>
            <Route
              exact
              path="/"
              render={props => <Posts postsObj={this.state.blog} />}
            />
            <Route
              path="/post1"
              render={props => <Post postObj={this.state.blog[0]} />}
            />
            <Route
              path="/post2"
              render={props => <Post postObj={this.state.blog[1]} />}
            />
            <Route
              path="/post3"
              render={props => <Post postObj={this.state.blog[2]} />}
            />
          </Switch>
        </HashRouter>

从“ MainApp.jsx”调用“ Main.jsx”

<div>
        <Header />
        <section>
          <Main /> // Calling function here.
          <Nav />
        </section>
        <Social />
        <Footer />
      </div>

Github源代码：https://github.com/SensehacK/react-app

谢谢。

Answer 1

您的项目中有两个并行的Router（HashRouter是Router的一种特殊类型），一个在Header组件中，另一个在{{1 }}。拥有多个路由器会造成混乱，并且很容易中断路由，这可能就是您的Main无法按预期工作的原因。

由于Link似乎可以正常工作，因此您可能希望将其移至顶层，例如移至HashRouter组件，然后删除另一个组件。确保无论何时使用MainApp，它都通过其父母/祖先嵌套在Link（或您的情况下为Router）中。

Answer 2

原来，我对HashRouter和BrowserRouter感到困惑。

我在主要组件中关注了HashRouter并使用

<Main Component> 
<HashRouter> <Switch> 
<Route  exact path="/" render= {component_name1} />
 </Switch>  </HashRouter>
</Main Component>

当我尝试将不同组件中的路径“ /”链接到“ component_name1”时我在HashRouter路由定义中使用了<Link to="/" > Go Home </Link>（BrowserRouter）。

因此，要使HashRouter正常工作，我需要使用<NavLink to="/">Go Home</NavLink> 我关注了2个不同的来源，并匆匆忘记了HashRouter和BrowserRouter的差异，即使它们的名称和实现也是如此。有时，截止日期需要您最好的才能发现基本内容。

感谢@Claire Lin的回复

Github code fix commit

React BrowserRouter <Link>不会加载接受“ /”确切路线的组件-定义的路径

2 个答案: