我正在尝试在我的反应应用程序中设置反应路由器。我正在使用的版本是
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-router-redux": "^5.0.0-alpha.9",
"redux": "^3.7.2",
我正在使用reacr-router-redux进行此应用。
应用程序流程:我的应用程序中有两个页面:登录页面和应用程序页面。登陆页面应该是登录页面,当我点击登录按钮时,它应该带我到应用页面。 App Page中有三个部分:Header,Sidebar和Content Section。内容部分是动态的,并根据边栏中单击的链接呈现两种不同的布局。一次只能在内容部分中呈现一个组件。
问题:我已经定义了路线。我正确登陆了LoginPage。当我点击登录时,我也正确地导航到应用页面。但是,当我单击侧栏上的链接时,所有组件(侧栏,标题和内容部分)都会消失。
我的代码
主要index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import Root from './Container/Root'
import {Provider} from 'react-redux'
import {ConnectedRouter} from 'react-router-redux'
import store, {history} from './store'
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<div>
<Root />
</div>
</ConnectedRouter>
</Provider>,
document.getElementById('root'));
registerServiceWorker();
根/ index.js
import React, {Component, PropTypes } from 'react'
import { Provider } from 'react-redux'
import LoginPage from '../../Pages/LoginPage'
import App from '../../Container/App/App'
import { Route, Link } from 'react-router-dom'
const styles = {
container: {
height: '100vh',
width : '100vw',
position: 'relative'
}
}
class Root extends Component {
render () {
return (
<div>
<div>
<main>
<Route exact path="/" component={LoginPage} />
<Route exact path="/app" component={App} />
</main>
</div>
</div>
)
}
}
export default Root
App.js(这里是问题所在)
import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom'
import Sidebar from '../../Components/Sidebar'
import TriviaPanel from '../../Components/TriviaPanel'
import Header from '../../Components/Header'
import ImagePanel from '../../Components/ImagePanel'
import LoginPage from '../../Pages/LoginPage'
class App extends Component {
render() {
return (
<div>
{/*<LoginPage/> */}
<Header/>
<Sidebar/>
<div>
<main>
<Route component={TriviaPanel} />
<Route exact path="/trivia" component={TriviaPanel} />
<Route exact path="/image" component={ImagePanel} />
</main>
</div>
</div>
);
}
}
export default App;
MenuPanel / index.js(这是我更改内容组件的侧边栏)
import React, { Component } from 'react';
import { push } from 'react-router-redux'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
const styles = require('./sidebar.css');
class MenuPanel extends Component {
constructor(){
super();
this.state = {
activePanel: "trivia"
}
}
toImagePage(){
this.setState({activePanel:"image"},()=>{
this.props.toImagePage()
})
}
toTriviaPage(){
this.setState({activePanel:"trivia"},()=>{
this.props.toTriviaPage()
})
}
render() {
return (
<div>
<div className="navbar-side">
<div className="tessact-logo"></div>
<div className={`navbar-item ${this.state.activePanel == "trivia"? "active":""}`} onClick={() => this.toTriviaPage()}>
<a className="navbar-item-link"><span className="fa fa-comment"></span> TRIVIA</a>
</div>
<div className={`navbar-item ${this.state.activePanel == "image"? "active":""}`} onClick={() => this.toImagePage()}>
<a className="navbar-item-link"><span className="fa fa-picture-o"></span> IMAGES</a>
<div className="navbar-item-inside">
<a className="navbar-item-inside-link">PERSONSS</a>
<a className="navbar-item-inside-link">BRANDS</a>
<a className="navbar-item-inside-link">OBJECTS</a>
</div>
</div>
<div className="navbar-item">
<a className="navbar-item-link"><span className="fa fa-tags"></span> KEYWORDS</a>
</div>
</div>
</div>
);
}
}
const mapDispatchToProps = dispatch => bindActionCreators({
toTriviaPage: () => push('/trivia'),
toImagePage: () => push('/image')
}, dispatch)
export default connect(
null,
mapDispatchToProps
)(MenuPanel)
我也尝试了这个
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
{/*<LoginPage/> */}
<Header/>
<Sidebar/>
<switch>
<Route exact path="/trivia" component={TriviaPanel}/>
<Route exact path="/image" component={ImagePanel}/>
</switch>
<Route component={TriviaPanel}/>
</div>
</BrowserRouter>
);
}
}
export default App;
我在做什么错了?在以前版本的路由器中,定义子路由和所有内容非常简单。我是这个路由器v4的新手。
答案 0 :(得分:1)
问题出在您的路线上。我最近遇到了同样的问题。所以这是你的问题。您点击了&#39; app&#39;的链接。网址变为
http://localhost/app
现在,应用程序组件中定义的所有路径都必须是/ app / link。
因此
<link to='/trivia'>Trivia</link> //example. use whatever metohd you are using to route instead. use the given url
<Route exact path="/trivia" component={TriviaPanel}/>
变为
<link to='/app/trivia'>Trivia</link>
<Route exact path="/app/trivia" component={TriviaPanel}/>
这告诉他们需要进入app组件然后在其jsx中搜索路径标记以进行渲染。