React Router 链接不工作

Question

React router Link 似乎不适用于我的应用程序。看来我想念基本不起作用。我的 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;

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

产品页面.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>
    )
  }
}

原文由 Eunicorn 发布，翻译遵循 CC BY-SA 4.0 许可协议

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'; ）

三。 玩弄你的嵌套路线。当涉及到路线时，顺序很重要。如果没有 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 社区可以为您提供更多帮助。

原文由 Tamiko 发布，翻译遵循 CC BY-SA 4.0 许可协议