反应路由器链接不工作

Question

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

App.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;

Main.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-redux，所以我敢打赌这是因为连接的组件没有收到通知 props 已更改并且 react 不会重新渲染。

Take a look at this answer.

还有

react-redux troubleshooting section.

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

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

我不知道你的具体情况，但这里有一些事情......

一个。如果你使用[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 4

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

Answer 5

您必须确保所有组件都在 包括页眉或布局组件

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