Question

我正在尝试开发React应用程序。问题是当我使用路由和交换机时，它不起作用。实际上，没有任何反应。有人可以给我一个关于这里可能出现问题的线索吗？这是我的代码：

import React, { Component } from 'react';
import Home from './HomeComponent';
import Menu from './MenuComponent';
import { DISHES } from '../shared/dishes';
import DishDetailComponent from './DishdetailComponent';
import Header from './HeaderComponent';
import Footer from './FooterComponent';
import { Switch, Route, Redirect, BrowserRouter as Router } from 'react-router-dom';

class Main extends Component {
  constructor(props) {
    super(props);

    this.state = {
      dishes: DISHES
    };
  }

  render() {
    const HomePage = () => {
      return(
        <Home />
      );
    }

    return (
      <div>
        <Header />
        <Router>
          <Switch>
            <Route path="/home" Component={HomePage} />  
            <Route path="/menu" Component={() => <Menu dishes={this.state.dishes} />} />
            <Redirect to="home" />
          </ Switch> 
        </Router>
      <Footer />

      </div>
    );
  }
}

Answer 1

一个明显的错误是，您在component道具中大写了“ C”，因此应使用component={HomePage}

来称呼它。

以下是您可以改进的其他地方：

如果要使用内联函数，则最好使用render道具，如果要直接使用组件，则最好仅使用Component道具。而且：

const HomePage = () => {
      return(
        <Home />
      );
    }

是不必要的，因为您可以直接使用Home组件。

尝试使用您的render()函数：

render() {

    return (
      <div>
        <Header />
        <Router>
          <Switch>
            <Route path="/home" component={Home} />  
            <Route path="/menu" render={() => <Menu dishes={this.state.dishes} />} />
            <Redirect to="home" />
          </ Switch> 
        </Router>
      <Footer />

      </div>
    );
  }

为什么Route无法与我的React应用一起使用？

1 个答案: