Question

React router Link似乎不适用于我的应用。似乎我失踪了，就像基本不起作用。我的链接组件将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-router-dom][1]，则需要通过导入BrowserRouter来包装您的开关，如下所示：

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

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

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

<强>两个 react-router＆amp; react-router-dom是两个不同的东西。确保您的导入一致。将ProductPage.js ln.2更改为：

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

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

<强>三玩弄你的嵌套路线。在路线方面，订单很重要。如果没有exact，则会获取您的网址并尝试将其与列表中的第一个匹配。如果您在/products之前有一个更通用的路由，例如/products/somethingspecific，路由器会在遇到第一个路由时路由您，并且永远不会到达更具体的路由尝试这样的事情：

<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>

祝你好运〜！

注意：不太确定＆＃34;我的页面刚刚破坏＆＃34;手段。您是否在浏览器或控制台中看到任何错误？如果您可以分享更多细节，我认为SO社区可以提供更多帮助。

Answer 2

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

Answer 3

你正在使用react-redux所以我敢打赌这是因为没有通知连接组件道具已经改变并且反应没有重新渲染。

Take a look at this answer.

以及

react-redux troubleshooting section.

因此，基本上尝试在您使用{ pure: false }的组件上使用connect(...或对其使用withRouter。

Answer 4

我认为您可以尝试使用Switch组件包装Router：

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

Answer 5

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

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

React Router Link无效

5 个答案: