Question

我在example.com/web-class.gr下有一个静态反应应用程序（这意味着没有服务器端呈现）。我的问题是，当我使用侧边栏菜单时，我无法在组件之间进行路由。

例如。当我导航到example.com/web-class.gr/css-intermediate时，页面按预期加载。从现在开始，如果我导航到不同的lessonName页面正在按预期加载。但我也有练习，当我按下菜单中的相应按钮时，我无法加载。要知道这是我的index.js文件：

import React from 'react';
import { Link as ReactLink } from 'react-router';
import sidebarStore from './Sidebar/SidebarStore';
import lessonValues from '../../lessonValues';
import LessonStore from '../../LessonStore';
import SidebarLink from './Sidebar/SidebarLink';


export default class Sidebar extends React.Component {
  constructor() {
    super();
    this.state = {
      SidebarIsCollapse: sidebarStore.getCurrentState()
    }
    this.NavMdPlaceholderClass = 'hidden-xs col-sm-4 col-md-3 col-lg-3';
  }

  componentWillMount() {
    sidebarStore.on('change', () => {
      this.setState({ SidebarIsCollapse: sidebarStore.getCurrentState() });
      this.ChangeSidebarState();
    });
    this.RenderMainMenu();
  }

  ChangeSidebarState() {
    const NAV_DefaultClasses = "col-sm-4 col-md-3 col-lg-3 ";
    if (this.state.SidebarIsCollapse) {
      this.NavMdPlaceholderClass = NAV_DefaultClasses + "slideInLeft";
    } else {
      this.NavMdPlaceholderClass = NAV_DefaultClasses + "slideOffLeft";
    }
  }

  RenderMainMenu() {
    this.main_menu = [];
    for (let link of lessonValues) {
      let { Id, url, isExercise, title } = link;
      this.main_menu.push(<SidebarLink key={Id} url={url} isExercise={isExercise} title={title}/>);
    }
  }

  render() {
    return (
      <div class={this.NavMdPlaceholderClass} id="nav-md-placeholder">
        <nav id="sidebar">
          <ul id="main-menu">
            <li class="ripple-btn">
                <ReactLink to="/" onClick={this.SetLessonDetails.bind(this)}>
                  <span class="item-align-fix">
                    <i class="glyphicon glyphicon-home" style={{'marginRight': '10px'}}></i>
                    <strong>
                      <span>AΡΧΙΚΗ</span>
                    </strong>
                  </span>
                </ReactLink>
              </li>

              {this.main_menu}
          </ul>
        </nav>
      </div>
    );
  }
}

这是SidebarLink组件文件：

import React from 'react';
import LessonStore from '../../../LessonStore';
import { Link as ReactLink } from 'react-router';

export default class SidebarLink extends React.Component {
  SetPageTitle() {
    LessonStore.setLesson(this.props.url);
  }

  render() {
    let glyphoconType = 'glyphicon ';
    glyphoconType += this.props.isExercise ? 'glyphicon-pencil' : 'glyphicon-ok-sign';
    glyphoconType += ' nav-ico untaken-lesson';

    return (
      <li class="ripple-btn">
        <ReactLink to={this.props.url} onClick={() => this.SetPageTitle()} >
          <span class="item-align-fix">
            <i class={glyphoconType}></i>
              <span>{this.props.title}</span>
          </span>
        </ReactLink>
      </li>
    );
  }
}

但如果我手动刷新页面，我可以显示练习页面。但现在我无法导航到任何其他元素。仅当我在侧边栏菜单中单击它并手动刷新页面时。

总结一下：

课程是动态加载的。我可以在他们之间导航。
我无法导航到练习。只有当我单击相应的练习并点击刷新按钮时。
如果我正在查看练习（例如exercise-1），我将无法导航到任何其他组件。

我使用nginx，以下是我对该项目的规则：

location ^~ /web-class.gr/ {
        try_files $uri $uri/ =404;
        if (!-e $request_filename){
            rewrite ^(.*)$ /web-class.gr/index.html break;
        }
    }

最后这是我的侧边栏组件：

import React from 'react';
import { Link as ReactLink } from 'react-router';
import sidebarStore from './Sidebar/SidebarStore';
import lessonValues from '../../lessonValues';
import LessonStore from '../../LessonStore';
import SidebarLink from './Sidebar/SidebarLink';

// some other helper functions here

  render() {
    return (
      <div class={this.NavMdPlaceholderClass} id="nav-md-placeholder">
        <nav id="sidebar">
          <ul id="main-menu">
            <li class="ripple-btn">
                <ReactLink to="/web-class.gr/" onClick={this.SetLessonDetails.bind(this)}>
                  <span class="item-align-fix">
                    <i class="glyphicon glyphicon-home" style={{'marginRight': '10px'}}></i>
                    <strong>
                      <span>AΡΧΙΚΗ</span>
                    </strong>
                  </span>
                </ReactLink>
              </li>

              {this.main_menu}
          </ul>
        </nav>
      </div>
    );

ReactLink to有问题吗？ 在我的apache计算机上，所有工作都按预期工作。我无法弄清楚我的计划会中断的原因。

更新

我提供网站链接，以帮助您的工作变得更轻松。该网站在希腊，但我相信你可以理解它的结构。

web-class.gr

Code on Github

Answer 1

这个为我工作

NB

React Router

仅使用<BrowserRouter>代码封装整个应用程序。

在渲染时使用此标记。

例如

如果您使用的是Create-React-app。请在Index.js文件中使用

ReactDom.Render(<BrowserRouter><App/></BrowserRouter>)

Answer 2

第二次更新：

将foo中的呈现代码更改为

private static int foo()
{
    // some foo code
    return 1;
}

[someAttribute(Skip=true)]
private static int foo(int arg)
{
    if (typeof(ProgramTest).GetMethod(nameof(foo), 
                        BindingFlags.Static | BindingFlags.NonPublic,
                        null, // use default binder
                        new Type[] {typeof(int)}, // list of parameter types
                        null) // array of parameter modifiers
                .GetCustomAttribute<someAttribute>()?.Skip ?? false)
        return 0;
    return arg;
}

我......路径以 ConditionalAttribute

开头

无法在react app中的组件之间成功路由

更新

2 个答案: