Question

我有一个现有的.NET Core MVC项目，该项目目前正在使用jQuery和Knockout.js的交互功能。我想从此转向更现代的方法。我已经看到.NET Core具有新的ReactJS项目模板，但是我无法从头开始，所以我试图将ReactJS添加到我的MVC项目中的特定页面上，随着时间的流逝，我将删除所有旧的jQuery和Knockout代码

我已经设法在运行npm run build时进行了反应，webpack和babel的设置和构建，并且可以在页面上显示一个简单的组件。但是，我想根据我所在的页面有条件地渲染一个React组件。目前，我在URL /Pricing/Sales下有一个现有的MVC页面/视图，我想用React组件替换此视图，同时保持_layout.cshtml（页眉，页脚等）的网站布局。

我希望能够将目标<div>放置在现有视图中，并使用react-router检测当前URL并显示适当的组件，但是我无法使它正常工作。我刚收到以下错误：

错误：App（...）：渲染未返回任何内容。这通常意味着缺少return语句。或者，要不显示任何内容，请返回null。

这是我的代码：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('reactRoot')
);

App.js

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import SalesIndex from './components/pricing/sales/SalesIndex';

const App = () => {
    <Switch>
        <Route exact path="/Pricing/Sales" component={SalesIndex} />
    </Switch>
}

export default App;

components / pricing / sales / SalesIndex.js

import React from 'react';

const SalesIndex = () => <div>Hello from SalesIndex!</div>

export default SalesIndex;

MVC视图

@model IEnumerable<Sale>

@{
    ViewData["Title"] = "Sales";
}

<div class="container">
    <div class="page-pricing page-pricing-sales">
        <h2>Sales</h2>
        <hr />

        <div id="reactRoot"></div>
    </div>
</div>

MVC配置

public void Configure(IApplicationBuilder app, IHostingEnvironment env, IServiceProvider services)
{
    app.UseDeveloperExceptionPage();
    app.UseDatabaseErrorPage();

    if (env.IsProduction())
    {
        //app.UseExceptionHandler("/Error");
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles();
    app.UseAuthentication();

    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "areas",
            template: "{area:exists}/{controller=Home}/{action=Index}/{id?}");

        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });
}

Webpack配置

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        index: './Scripts/src/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'wwwroot/dist'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                use: {
                    loader: 'babel-loader'
                },
                test: /\.js$/,
                exclude: /node_modules/
            }
        ]
    }
}

Answer 1

错误非常清楚。您忘记了return：

const App = () => {
  return ( // <-- you are missing this
    <Switch>
        <Route exact path="/Pricing/Sales" component={SalesIndex} />
    </Switch>
  )
}

您也可以写

const App = () =>
  <Switch>
    <Route exact path="/Pricing/Sales" component={SalesIndex} />
  </Switch>

带有可选的括号（如果您喜欢这种东西的话）。

根据现有.NET Core MVC项目中的URL有条件地渲染React组件

1 个答案: