javascript - react 路由器无法获取

Question

我第一次尝试为 react 设置路由。但有些东西并没有增加。

我收到消息:当我输入时无法获取/monitors“http://localhost:8080/monitors”

App.js

import React from 'react';
import ReactDom from 'react-dom';
import Sidebar from './components/Sidebar'
import Main from './components/Main'

const App = () => {
      return (
        <div className="container">
            <Sidebar/>
            <Main/>
        </div>
      );
   }
export default App;

Main.js

import {Switch, Route} from 'react-router-dom'
import ProductsDisplay from './ProductsDisplay'
import Home from './Home'
import Contact from './Contact'

const Main = () => {
    <main>
        <Switch>
            <Route exact path="/" component={Home}/>
            <Route path="/contact" component={Contact}/>
            <Route path="/monitors" component={ProductsDisplay} category="monitors"/>
            <Route path="/machines" component={ProductsDisplay} category="machines"/>
        </Switch>
    </main>
}

ProductsDisplay.js

import React from 'react';
import ReactDom from 'react-dom';
import Product from './Product';

class ProductsDisplay extends React.Component {
    state = {
        productList: [],
        productCategory:''
    };

    constructor(props){
        super();
        productCategory = props.category;
    }

    componentDidMount() {
        this.setState(prevState => ({
            productList: [
                {productName: "ASUS 4K, 144Hz Monitor", productDescription: "Blah Blah Blah, cool stuff", productAvailability: true, productRating: 4.4},
                {productName: "Samsung 4K, 75Hz Monitor", productDescription: "Samsung cool stuff!", productAvailability: false, productRating: 4.0},
                {productName: "LG 2560x1080 Monitor, 60Hz Monitor", productDescription: "LG cool features!", productAvailability: false, productRating: 5.0},
            ]
        }));
    }

    render() {
        return (
            <div className="product-display">
            {this.state.productList.map((product, i) => 
                <Product productName={product.productName} 
                    productDescription={product.productDescription} 
                    productAvailability={product.productAvailability} 
                    productRating={product.productRating} key={i}/>
            )}
            </div>
        );
    }
}
export default ProductsDisplay;

当我渲染<App/>时我用 <BrowserRouter> 包围它我尝试删除这些标签，但没有效果。

Answer 1

您需要使用 BrowserRouter 封装您的路由

import { BrowserRouter, Switch, Route } from 'react-router-dom';
<BrowserRouter>
      <Switch>
        <Route exact path="/" component={Fakebook}/>
        <Route exact path="/Home" component={Home}/>
        <Route component={NotFound}/>
      </Switch>
  </BrowserRouter>