javascript - React Router 链接不工作

Question

React router Link 似乎不适用于我的应用程序。看来我想念基本不起作用。我的 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 和 react-router-dom 是两个独立的东西。确保您的导入是一致的。将 ProductPage.js ln.2 更改为:

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

(现在，它是 import { Link } from 'react-router';)

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