反应路由器链接不起作用

Question

React router Link 似乎不适用于我的应用程序。似乎我失踪了，因为基本不起作用。我的链接组件将 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;

主程序

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

产品页面.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通过像这样导入来用 a 包装您的开关：

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之前/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>

祝你好运~！

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