Question

嗨，我希望我所有的动态网址都能击中相同的组件TournamentDetail。网址将像http://localhost/tournament-detail/name1/102或http://localhost/tournament-detail/name2/103等。我已将路线定义为

<Route path="/tournament-detail/:name/:id" component={TournamentDetail}/>

但它不起作用。有人能告诉我出了什么问题吗？

Answer 1

如果我像localhost / tournament-detail / name / 1那样点击url我会收到以下错误并且页面无法呈现

拒绝申请来自＆＃39; http://localhost:8081/tournament-detail/name/node_modules/react-responsive-carousel/lib/styles/carousel.min.css＆＃39;因为其MIME类型（＆＃39; text / html＆＃39;）不是受支持的样式表MIME类型，并且启用了严格的MIME检查。 1：1拒绝使用＆＃39; http://localhost:8081/tournament-detail/name/node_modules/bootstrap/dist/css/bootstrap.min.css＆＃39;因为其MIME类型（＆＃39; text / html＆＃39;）不是受支持的样式表MIME类型，并且启用了严格的MIME检查。 index.js无法加载资源：服务器响应状态为404（未找到） universalModuleDefinition：9 Uncaught TypeError：无法读取属性＆＃39; addons＆＃39;未定义的在universalModuleDefinition：9 在universalModuleDefinition：9 index.js无法加载资源：服务器响应状态为404（未找到） 1：1拒绝执行来自＆＃39; http://localhost:8081/tournament-detail/name/index.js＆＃39;因为它的MIME类型（＆＃39; text / html＆＃39;）不可执行，并且启用了严格的MIME类型检查。 1：1拒绝使用＆＃39; http://localhost:8081/tournament-detail/name/node_modules/react-responsive-carousel/lib/styles/carousel.min.css＆＃39;因为其MIME类型（＆＃39; text / html＆＃39;）不是受支持的样式表MIME类型，并且启用了严格的MIME检查。 1：1拒绝使用＆＃39; http://localhost:8081/tournament-detail/name/node_modules/bootstrap/dist/css/bootstrap.min.css＆＃39;因为它的MIME类型（＆＃39; text / html＆＃39;）不是受支持的样式表MIME类型，并且启用了严格的MIME检查。

reactjs组件文件如下：

import React, { Component } from 'react';
import Header from './Header.js';
import Footer from './Footer.js';
import Notification from './Notification.js';
import Menu from './Menu.js';
import {Route,Switch} from "react-router-dom";
import TournamentListPage from './TournamentListPage.js';
import IndexPage from "./IndexPage.js";
import Ladder from "./Ladder.js";
import Auth from './Auth.js';
import Fyp from './Fyp.js';
import Register from './Register.js';
import ValidateEmail from './ValidateEmail.js';
import ResetPassword from './ResetPassword.js';
import TournamentDetail from './TournamentDetail.js';

    export default class Home extends Component{

      render(){
        return(
          <div>
              <Notification/>
              <Header/>
              <Menu/>
              <Switch>
                <Route exact path="/" component={IndexPage}/>
                <Route path="/tournaments" component={TournamentListPage}/>
                <Route path="/players-ladder" component={Ladder}/>
                <Route path="/login" component={Auth}/>
                <Route path="/fyp" component={Fyp}/>
                <Route path="/register" component={Register}/>
                <Route path="/validateemail" component={ValidateEmail}/>
                <Route path="/reset-password" component={ResetPassword}/>
                <Route path="/tournament-detail/:name/:id" component={TournamentDetail}/>
              </Switch>
              <Footer/>
          </div>
        );
      }

    }

reactjs应用程序中的动态URL路径无法正常工作

1 个答案: