反應路由器鏈接不工作

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 `}/>

{姓名}

最后一條消息....

`