请教Link跳转问题，列表页到详情页跳转不过去，但是直接在地址栏输入详情页却可以打开

#1

请教Link跳转问题，列表页到详情页跳转不过去，但是直接在地址栏输入详情页却可以打开。http://localhost:8081/Detail/1

这是列表页的代码

这是详情页的代码

#2

试试用withRouter包裹一下组件

#3

谢谢，我试了不行呢

#4

你的Route呢？Link只是相当于链接a, Route才决定了你显示什么

#5

route写上之后是在当前页面显示，想让它跳转到新页面

#6

发下你的route配置吧，这么看看不出问题呀

#7

那也不能不写Route啊，Route才是根据你的url来render不同的组件额，修改列表页代码，大体为下面这样:

    render() {
        
        return() {
            <Router>

                <Route path="/" exact>
                    <div>
                        <ul>
                            /*
                                ..............
                            */
                        </ul>
                    </div>
                </Route>
                <Route path="/Detail/:id" component={Detail}></Route>
            </Router>
        }

    }
#8

这样写能打开，但是列表还在，我想直接跳转到新的页面，不要带列表内容的。

#9

这还不简单。Route外面添加Switch

import {Switch, Link} from 'react-router-dom';



    render() {
        
        return() {
            <Router>
            <Switch>
                <Route path="/" exact>
                    <div>
                        <ul>
                            /*
                                ..............
                            */
                        </ul>
                    </div>
                </Route>
                <Route path="/Detail/:id" component={Detail}></Route>
             </Switch>
            </Router>
        }

    }
#10

又报错了

#11

刚才写的时候比较着急。Route Detail那个漏掉了结束标签，你加上

</Route>
#12

结束这里我写了，但是不知道为什么会报这个错误。

#13

那不知道了，你现在的代码可否贴出来，我亲自试过是可以的

#14

这是代码，我刚才搜到说如果用switch的话， 必须是这种类型的，／后面要有冒号，但是改了还是报这个错。

#15

您有qq吗？加您qq请教。

#16

这一块，修改成:

    render() {

        return() {
            <Router>
                <Switch>
                    <Route path="/" exact>
                        <div key={this.state.data}>
                            <ul>
                                 {this.state.data.map(news => 
                                      <li key={news.id}><Link to={`/Detail/${news.id}`}>{news.name}</Link></li>
                                )}
                            </ul>
                        </div>
                    </Route>
                    <Route path="/Detail/:id" component={Detail}></Route>
                 </Switch>
            </Router>
        }

    }
#17

现在没有报错了，内容却没有了。数据没有被渲染出来

#18

你好，请问你的详情页的数据怎么渲染的，渲染出来了么？我也正好遇上这个问题！