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

【问题标题】：React BrowserRouter <Link> doesn't load the component which accepts "/' exact Route - Path definedReact BrowserRouter <Link> 不加载接受“/”确切路由的组件 - 定义的路径
【发布时间】：2019-11-24 22:24:14
【问题描述】：

我的导航组件代码

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

谢谢。

【问题讨论】：

标签： javascript reactjs typescript react-router url-routing

【解决方案1】：

您的项目中有两个并行的Routers（HashRouter 是一种特殊的Router 组件），一个在Header 组件中，另一个在Main 中。拥有多个路由器会让人感到困惑，并且很容易破坏路由，这可能就是您的 Link 无法按预期工作的原因。

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

【讨论】：

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

【讨论】：