reactjs - 路由在react-router v4中不起作用

Question

我正在尝试在我的 react 应用程序中设置 react 路由器。我使用的版本是

"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。

应用程序流程:我的应用程序中有两个页面:登录页面和应用程序页面。登陆页面应该是登录页面，当我单击登录按钮时，它应该带我进入应用程序页面。应用程序页面分为三个部分:标题、侧边栏和内容部分。内容部分是动态的，并根据在侧边栏中单击的链接呈现两种不同的布局。内容部分一次只能呈现一个组件。

问题:我已经定义了路线。我正确登陆到登录页面。当我单击“登录”时，我也可以正确导航到应用程序页面。但是，当我单击侧边栏上的链接时，所有组件(侧边栏、标题和内容部分)都会消失。

我的代码

主索引.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 的新手。

Answer 1

问题出在你的路线上。我最近遇到了同样的问题。所以这是你的问题。您点击了“应用程序”的链接。网址变为

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}/>

这告诉React它需要进入应用程序组件，然后在其jsx中搜索路由标签来渲染。