react路由器-dom链接不工作
提问于 2017-06-10 10:49:11
我从“反应路由器”转到“反应路由器”，修正了所有的错误.但是，现在点击链接，url正在改变，但各自的视图没有呈现。
下面是我的应用程序的结构：
index.js
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<HashRouter>
<App>
<Switch>
<Route path="signin" component={Signin} />
<Route path="about" component={About} />
<Route path="signout" component={Signout} />
<Route path="signup" component={Signup} />
<Route path="thanks" component={Thanks} />
<Route path="tasks" component={ requireAuth(Task) }/>
<Route path="/" component={ Content }/>
</Switch>
</App>
</HashRouter>
</Provider>
, document.querySelector('.container'));app.js
class App extends Component {
render() {
return (
<div>
<Header/>
{this.props.children}
<Footer/>
</div>
);
}
}
export default withRouter(App);header.js
class Header extends Component {
showLoginButton() {
if (this.props.authenticated) {
// show a link to sign out
return [<span className="loginBtn">
<Link to="/signout">Sign Out</Link>
</span>,
<span className="loginBtn">
<Link to="/tasks">Tasks</Link>
</span>
]
} else {
// show a link to sign in or sign up
return [
<span className="loginBtn" key={1}>
<Link className="nav-link" to="/signin">Sign In</Link>
</span>,
<span className="loginBtn" key={2}>
<Link className="nav-link" to="/signup">Sign Up</Link>
</span>,
<span className="loginBtn" key={3}>
<Link className="nav-link" to="/about">About</Link>
</span>
];
}
}
render() {
return (
<div className="header">
<span className="logo">
<Link to="/" className="navbar-brand">company</Link>
</span>
{this.showLoginButton()}
</div>
);
}
}
function mapStateToProps(state) {
return {
authenticated: state.auth.authenticated
};
}
export default withRouter(connect(mapStateToProps)(Header));我尝试过withRouter，就像在post https://stackoverflow.com/a/43811162/888181中提到的那样，但是它仍然不起作用！
回答 4
Stack Overflow用户
回答已采纳
发布于 2017-06-10 15:59:22
尝试将根路径移到顶部，并确保将exact放在路径前面。另外，您应该将/放在其他路径上。
<Switch>
<Route exact path="/" component={ Content }/>
<Route path="/signin" component={Signin} />
<Route path="/about" component={About} />
<Route path="/signout" component={Signout} />
<Route path="/signup" component={Signup} />
<Route path="/thanks" component={Thanks} />
<Route path="/tasks" component={ requireAuth(Task) }/>
</Switch>Stack Overflow用户
发布于 2021-04-17 12:31:29
import {NavLink} from 'react-router-dom';使用NavLink组件安装一个标签，对我来说它是工作的
Stack Overflow用户
发布于 2022-01-07 02:44:38
现在有点晚了，但我最近遇到了同样的问题，这就是为什么我遇到了您的问题，并发现这篇文章很有帮助：https://reactrouter.com/docs/en/v6/api#route
<Router>
<Route exact path="/" element={ <Content /> }/>
</Router>现在，反应性路由器-dom v6也用路由替换了交换机元素，所以如果您升级了包版本，请注意https://reactrouter.com/docs/en/v6/upgrading/v5#upgrade-all-switch-elements-to-routes。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44476918
复制相关文章
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
