我有一个位于 example.com/web-class.gr
下的静态 React 应用程序(这意味着没有服务器端渲染)。我的问题是,当我使用侧边栏菜单时,无法在组件之间路由。
例如。当我导航到 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>
);
}
}
但是如果我手动刷新页面,我就可以显示练习页面。但现在我无法导航到任何其他元素。仅当我在侧边栏菜单中单击它并手动刷新页面时。
总结一下:
- 类(class)正在动态加载。我可以在它们之间导航。
- 我无法导航至练习。仅当我单击相应的练习并点击刷新按钮时。
- 如果我正在查看练习(例如
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
机器上一切都按预期工作。我不明白为什么我的程序会崩溃。
更新
我提供该网站的链接,以帮助您的工作变得更轻松。该网站是希腊语的,但我相信您可以理解它的结构。
最佳答案
这个对我有用
NB
对于 react 路由器
使用<BrowserRouter>
只需标记一次即可包含整个应用程序。
在渲染时使用此标记。
For Example
如果您使用Create-React-app
.在您的Index.js
处使用它文件
ReactDom.Render(<BrowserRouter><App/></BrowserRouter>)
关于reactjs - 无法在 react 应用程序的组件之间成功路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41848746/