react-router4.x和react-router-dom Link组件只有路由变化页面不能跳转

关于react-router和 react-router-dom的Link标签使用时只有路由跳转,没有页面跳转的问题:

是因为在配置路由的时候,所有从首页跳转到其他页路由配置,需要在首页路由之前:

不跳转
const Routes = ()=>(
        <div className='App'>
            <Router>
                <Switch>
                    <Route path={'/404'} component={NotFound} />
                    <Route path={'/search'} component={Search} />
                    <Route path={'/result'} component={Result} />
                    <Route path={'/'} component={Home} />
                    <Route path={'/albumlist'} component={AlbumList} />
                    <Redirect from={"*"} to={'/'} />
                </Switch>
            </Router>
        </div>
)
export default Routes;

修改之后跳转:
const Routes = ()=>(
        <div className='App'>
            <Router>
                <Switch>
                    <Route path={'/404'} component={NotFound} />
                    <Route path={'/search'} component={Search} />
                    <Route path={'/result'} component={Result} />
                    <Route path={'/albumlist'} component={AlbumList} />
                    <Route path={'/'} component={Home} />
                    <Redirect from={"*"} to={'/'} />
                </Switch>
            </Router>
        </div>
)
export default Routes;

比如说我这里遇到的不跳转,就是因为我把跳到"/albumlist"这个页面的路由放到了首页路由之后,随便我按照网上其他人说的加什么withRouter都没用,后来我突然灵光一闪,把"/albumlist"的路由放到首页路由之前,就跳转了

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
React Router是一个用于构建单页面应用程序的库。它提供了一种在React应用程序中管理路由的方式。React Router DOM是React Router的一个扩展,用于在Web应用程序中进行路由React Router DOM 5和React Router DOM 6之间有几个重要的区别: 1. 安装方式:React Router DOM 5使用npm包管理器进行安装,命令为`npm install react-router-dom`。而React Router DOM 6使用yarn进行安装,命令为`yarn add react-router-dom@next`。 2. 路由组件:在React Router DOM 5中,使用`<Route>`组件来定义路由。而在React Router DOM 6中,使用`<Route>`组件的替代方案`<Routes>`来定义路由。 3. 路由匹配方式:React Router DOM 5使用基于路径的匹配方式来确定哪个路由应该被渲染。而React Router DOM 6引入了新的匹配方式,称为元素匹配(element matching),它可以根据组件的类型来匹配路由。 4. 嵌套路由:在React Router DOM 5中,嵌套路由需要使用嵌套的`<Route>`组件来定义。而在React Router DOM 6中,可以使用嵌套的`<Routes>`组件来定义嵌套路由。 5. 动态路由:在React Router DOM 5中,可以通过在路径中使用参数来定义动态路由。而在React Router DOM 6中,可以使用`<Route>`组件的新属性`element`来定义动态路由。 6. 错误处理:React Router DOM 5使用`<Switch>`组件来处理路由匹配错误。而React Router DOM 6使用`<Routes>`组件的新属性`fallback`来处理路由匹配错误。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值