我的导航组件代码
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
谢谢。
您的项目中有两个并行的Router
(HashRouter
是Router
的一种特殊类型),一个在Header
组件中,另一个在Main
中。有多个路由器会造成混乱,并且很容易中断路由,这可能就是Link
无法按预期工作的原因。
由于HashRouter
似乎可以正常工作,因此您可能希望将其移至顶层,例如移至MainApp
组件,然后删除另一个。确保无论何时使用Link
,它都通过其父母/祖先嵌套在Router
(或您的情况下为HashRouter
)中。
结果我在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的答复