我正在使用react-router-dom管理我的路线。我有一个导航栏，其路线正常运行。一个选项卡上有一个菜单，其中包含其他选项卡和适当的链接组件。在第二个菜单上，我的URL被重定向，但是我的组件没有被渲染。如果我刷新，将显示该组件。
我尝试了不同的路由方式，但似乎无济于事。
App.js
import React, { Component } from 'react';
import './App.css';
import MainRouter from './components/MainRouter'
import Navbar from './components/Navbar/Navbar.js'
import { Layout, Content } from 'react-mdl';
import { Link } from 'react-router-dom';
import Blur from 'react-css-blur';
import { connect } from 'react-redux';
import { actionActiveItem } from './actions/itemActions';
import { blurOn, blurOff } from './actions/blurActions';
class App extends Component {
constructor(props) {
super(props);
this.items = ['Home', 'About', 'Projects', 'Contact'];
}
//handles the click of the navBar menu items.
handleItemClick(index) {
this.blurEffect(this.props.blur.blurTime)
this.props.onActiveItem(index);
}
blurEffect = (miliseconds) => {
this.props.onBlurOn()
setTimeout(() => {
this.props.onBlurOff()
}, miliseconds);
}
render() {
return (
<Layout>
<Navbar>
{/* maps the navBar items into the NavBar */}
{this.items.map((item, index) =>
<Link
key={index}
className={`${this.props.activeItem === index ? 'active' : ''}`}
to={`${item.toLowerCase()}`}
onClick={this.handleItemClick.bind(this, index)}
>{item}
</Link>
)}
</Navbar>
{/* Checks if the blur property is active in the state and acts accordingly */}
<Blur radius={ this.props.blur.active ? `${this.props.blur.blurRadius}px` : '0' } transition={`${this.props.blur.blurTime}ms`}>
<Content className="content">
<MainRouter/>
</Content>
</Blur>
</Layout>
);
}
}
const mapStateToProps = state => ({
blur: state.blur,
activeItem: state.item,
});
const mapActionsToProps = {
onBlurOn: blurOn,
onBlurOff: blurOff,
onActiveItem: actionActiveItem,
}
export default connect(mapStateToProps, mapActionsToProps)(App);
MainRouter.js
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import Projects from './Projects';
const MainRouter = () => {
return(
<Switch >
<Route exact path="/" component={Home} />
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route path="/projects" render={ () => <Projects />} />
</Switch>
)
}
export default MainRouter;
Projects.js
import React, { Component } from 'react';
import { Tabs, Tab } from 'react-mdl';
// import ProjectCard from './ProjectCard/ProjectCard';
// import ProjectsRouter from './ProjectsRouter/ProjectsRouter';
import './Projects.css';
import Blur from 'react-css-blur';
import { Link, Route } from 'react-router-dom'
import { connect } from 'react-redux';
import { blurOn, blurOff } from '../actions/blurActions';
import ReactProjects from './Projects/ReactProjects/ReactProjects';
import JavascriptProjects from './Projects/JavascriptProjects/JavascriptProjects';
import UnityProjects from './Projects/UnityProjects/UnityProjects';
class Projects extends Component {
constructor(props) {
super(props);
this.state = { activeTab: 0,
blurTime: 550,
};
}
// toggleCategories() {
// switch (this.state.activeTab) {
// case 0: //javascript
// return(
// <div className="grid">
// <ProjectCard url='https://github.com/florovarelaa/JS-GasStations'
// icon='javascript'
// title='Map Gas Stations'
// description='An application that shows the gas stations of a region in a map.'
// />
// </div>
// );
// case 1: //react
// return(
// <div className="grid">
// <ProjectCard url= 'https://github.com/florovarelaa/React-portfolio'
// icon='react'
// title='Portfolio'
// description='My own personal Portfolio'
// />
// <ProjectCard url='https://github.com/florovarelaa/React-RoboFriends'
// icon='react'
// title='Robo Friends'
// description='App for filtering Card Components'
// />
// </div>
// );
// case 2: //unity
// return(
// <div className="grid">
// <ProjectCard url='https://github.com/florovarelaa/Unity-Hit-The-Targets'
// icon='unity'
// title='Hit the Targets'
// description='A top down shooting game'
// />
// <ProjectCard url='https://github.com/florovarelaa/Unity-UnfairPlatformer'
// icon='unity'
// title='Unfair Platformer'
// description='A not simple nor fair platformer game'
// />
// <ProjectCard url='https://github.com/florovarelaa/Unity-Patrol-Animal-Zone'
// icon='unity'
// title='Patrol Animal Zone'
// description='A small game with an abilty sistem'
// />
// <ProjectCard url='https://github.com/florovarelaa/Unity-Flappy-Bird'
// icon='unity'
// title='Flappy Bird'
// description='A flappy bird clone'
// />
// </div>
// );
// default: break;
// }
// }
setActiveTab (tabId) {
this.setState({
activeTab: tabId
})
}
blurEffect = (miliseconds) => {
this.props.onBlurOn()
setTimeout(() => {
this.props.onBlurOff()
}, miliseconds);
}
// componentDidMount to fetch from api
render () {
return(
<div>
<div className="tabs-container">
<Tabs className="project-tabs" activeTab={this.state.activeTab}
onChange={
(tabId) => {
this.setState({
activeTab: tabId
})
this.blurEffect(this.state.blurTime)
}
}
ripple>
<Link to={`/projects/javascript`}>
<Tab className="category-tab">Javascript</Tab>
</Link>
<Link to={`/projects/react`}>
<Tab className="category-tab">React</Tab>
</Link>
<Link to={`/projects/unity`}>
<Tab className="category-tab">Unity</Tab>
</Link>
</Tabs>
</div>
<Blur radius={ this.props.blur.active ? `${this.props.blur.blurRadius}px` : '0' } transition = {`${this.state.blurTime}ms`}> */}
{/* {this.toggleCategories()} */}
<Route path="/projects/javascript" component={JavascriptProjects} />
<Route path="/projects/react" component={ReactProjects} />
<Route path="/projects/unity" component={UnityProjects} />
</Blur>
</div>
)
}
}
const mapStateToProps = state => ({
blur: state.blur,
});
const mapActionsToProps = {
onBlurOn: blurOn,
onBlurOff: blurOff,
};
export default connect(mapStateToProps, mapActionsToProps)(Projects);
JavascriptProjects.js //ReactProjects.js和UnityProjects.js相似。
import React, { Component } from 'react';
import ProjectCard from '../../ProjectCard/ProjectCard';
class JavascriptProjects extends Component {
render() {
return(
<div className="grid">
<ProjectCard url='https://github.com/florovarelaa/JS-GasStations'
icon='javascript'
description='An application that shows the gas stations of a region in a map.'
/>
</div>
)
}
}
export default JavascriptProjects;
我希望呈现我的JavascriptProjects组件。