[英]can't route successfully between components in react app
I have a static react app (that means there is not server side rendering) located under example.com/web-class.gr
. 我有一个静态反应应用程序(这意味着没有服务器端呈现)位于
example.com/web-class.gr
下。 My problem is that I can't route between components when I use my sidebar menu. 我的问题是,当我使用侧边栏菜单时,我无法在组件之间进行路由。
For instance. 例如。 When I navigate to
example.com/web-class.gr/css-intermediate
the page loads as expected. 当我导航到
example.com/web-class.gr/css-intermediate
,页面按预期加载。 From now on if I navigate to different lessonName
the page is loading as expected. 从现在开始,如果我导航到不同的
lessonName
,页面将按预期加载。 But I also have exercises, which I can't load when I press the corresponding button in my menu. 但我也有练习,当我按下菜单中的相应按钮时无法加载。 To get an idea this is my index.js file:
要知道这是我的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>
);
}
}
here is the SidebarLink component file: 这是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>
);
}
}
But if I refresh the page manually, I am able to reveal the exercise page. 但是,如果我手动刷新页面,我可以显示练习页面。 But now I can't navigate to any other element.
但现在我无法导航到任何其他元素。 Only if I click it in sidebar menu and manually refresh the page.
仅当我在侧边栏菜单中单击它并手动刷新页面时。
To sum up: 总结一下:
exercise-1
), I am not able to navigate to any other component. exercise-1
),我无法导航到任何其他组件。 I use nginx
and below is my rule for the project: 我使用
nginx
,以下是我的项目规则:
location ^~ /web-class.gr/ {
try_files $uri $uri/ =404;
if (!-e $request_filename){
rewrite ^(.*)$ /web-class.gr/index.html break;
}
}
And lastly here is my sidebar component: 最后这是我的侧边栏组件:
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>
);
Is there any problem with ReactLink to
? ReactLink to
有什么问题吗? On my apache
machine all works as expected. 在我的
apache
机器上,所有工作都按预期工作。 I can't figure out why my program breaks. 我无法弄清楚为什么我的程序会中断。
I provide the link of the site to help your job become easier. 我提供网站的链接,以帮助您的工作变得更容易。 The site is in greek although I believe you can understand it's structure.
该网站在希腊,虽然我相信你可以理解它的结构。
This One worked For me 这一个对我有用
NB
NB
for React Router 用于React路由器
use <BrowserRouter>
tag only once to enclose the whole of your application. 仅使用
<BrowserRouter>
标记一次以包含整个应用程序。
Use this tag at the point of Rendering. 在渲染点使用此标记。
For Example
例如
If you are using Create-React-app
.Use this at your Index.js
file 如果您使用的是
Create-React-app
。请在Index.js
文件中使用
ReactDom.Render(<BrowserRouter><App/></BrowserRouter>)
Second Update: 第二次更新:
Change your render code in react/index.js
to 将
react/index.js
渲染代码更改为
ReactDom.render(
<Router history={browserHistory} >
<Route path="/" component={Layout} >
<IndexRoute component={Index} ></IndexRoute>
<Route path="/exercise-1" name="exercise-1" component={Exercise1} ></Route>
<Route path="/exercise-2" name="exercise-2" component={Exercise2} ></Route>
<Route path="/exercise-3" name="exercise-3" component={Exercise3} ></Route>
<Route path="/exercise-4" name="exercise-4" component={Exercise4} ></Route>
<Route path="/exercise-5" name="exercise-5" component={Exercise5} ></Route>
<Route path="/exercise-6" name="exercise-6" component={Exercise6} ></Route>
<Route path="/:lessonName" name="lesson" component={Lesson} ></Route>
<Route path=":lessonName" name="lesson" component={Lesson} ></Route>
</Route>
</Router>
,app);
i..e the path starts with /
我......路径以
/
开头
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.