反应路由器链接不工作

Question

React 路由器链接似乎不适用于我的应用程序。 看来我错过了基本不起作用。 我的链接组件将 URL 更新为 /products/singleproduct 但我的页面刚刚中断...。谁能告诉我如何解决这个问题？

应用程序.js

 import React from 'react'; import Header from './Header'; import Body from './Body'; import Main from './Main'; require('../../scss/style.scss'); const App = () => ( <div> <Header /> <Main /> </div> ); export default App;

主.js

 import React, { Component } from 'react'; import { Switch, Route } from 'react-router-dom'; import ServicePage from './ServicePage'; import ProductPage from './ProductPage'; import SingleProductPage from './SingleProductPage'; import Body from './Body'; export default class Main extends Component { render() { return ( <main> <Switch> <Route exact path="/" component={Body} /> <Route path='/services' component={ServicePage} /> <Route path='/products' component={ProductPage}> <Route path="/products/singleproduct" component={SingleProductPage} /> </Route> </Switch> </main> ) } }

ProductPage.js

 import React, { Component } from 'react'; import { Link } from 'react-router'; import { withStyles } from 'material-ui/styles'; import Card, { CardActions, CardContent, CardMedia } from 'material-ui/Card'; import Button from 'material-ui/Button'; import Typography from 'material-ui/Typography'; require('../../scss/style.scss'); export default class ProductPage extends Component { render() { return ( <div className="product-page"> <h1>Products</h1> <div className="section-header-line"></div> <Link to="/products/singleProduct"> Single Product </Link> </div> ) } }

Answer 1

我不完全了解你的情况，但这里有一些事情......

一。 如果您使用[react-router-dom][1] ，您需要通过像这样导入它来用BrowserRouter包装您的交换机：

import { BrowserRouter, Route, Link } from 'react-router-dom'

然后将它添加到您的交换机周围，如下所示：

<BrowserRouter>
  <Switch>
    <Route exact path="/" component={Body} />
  </Switch>
</BrowserRouter>

二。 react-router和react-router-dom是两个独立的东西。 确保您的导入是一致的。 将 ProductPage.js ln.2 更改为：

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

（现在，它是import { Link } from 'react-router-dom'; ）

三。 玩弄你的嵌套路由。 就路线而言，顺序很重要。 如果没有exact ，它会获取您的 URL 并尝试将其与列表中的第一个进行匹配。 如果您在/products/somethingspecific之前有一个更通用的路由，例如/products路由器会在遇到第一个路由时为您路由，并且永远不会到达更具体的路由，请尝试以下操作：

<BrowserRouter>
  <Switch>
    <Route exact path="/" component={Body} />
    <Route path='/services' component={ServicePage} />
    <Route path='/products/singleproduct' component={SingleProductPage} />
    <Route exact path='/products' component={ProductPage} />
  </Switch>
</BrowserRouter>

祝你好运~！

注意：不太确定“我的页面刚刚中断”是什么意思。 您是否在浏览器或控制台中看到任何错误？ 如果您可以分享更多细节，我认为 SO 社区可以为您提供更多帮助。

Answer 2

我想你可以尝试用Router组件包装Switch ：

<Router>
  <Switch>
    <Route exact path="/" component={Body} />
    <Route path='/services' component={ServicePage} />
    <Route path='/products' component={ProductPage} />
    <Route path="/products/singleproduct" component={SingleProductPage} />
  </Switch>
</Router>

Answer 3

我遇到了路由器链接不工作的情况，最终是在我的 App.js 中使用了<StyleRoot>导致了问题。 从<StyleRoot>删除<StyleRoot> ... </StyleRoot>标签后，我将它们添加到真正需要它的特定组件中。 在此之后，我的路由器链接正常工作。 仔细检查是否有任何 CSS 样式实用程序（例如<StyleRoot> （来自 Radium））正在影响您的应用程序。

Answer 4

您正在使用 react-redux 所以我敢打赌这是因为连接的组件没有收到通知 props 已更改并且 react 不会重新渲染。

看看这个答案。

以及

react-redux 故障排除部分。

所以基本上尝试在使用connect(...或使用withRouter组件上使用{ pure: false } 。

Answer 5

你必须确保你的所有组件都在包含标题或布局组件中

<BrowserRouter>
   <Switch>
     <Link to="/somewhere" />  
   </Switch>
</BrowserRouter>

Answer 6

使用 BrowserRouter import { BrowserRouter as Router, Link } from "react-router-dom"; <Router> <Link to={ import { BrowserRouter as Router, Link } from "react-router-dom"; <Router> <Link to={ /rooms/${id} }> <div className='sidebarChat'> <Avatar src={ https://avatars.dicebear.com/api/human/${seed}.svg `}/>

{姓名}

最后一条消息....

`