Question

路由不起作用。每个路由始终呈现组件MainPage

index.js

<input id="part" type="range" min="1" max="6" value="6" step="1">

<p class="update-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In nobis nemo porro saepe facere minus!</p>
<p class="update-2">Lorem ipsum dolor sit amet.</p>
<p class="update-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem impedit neque odio, aut. Quos sapiente quisquam molestias, fugit iste aliquid, aperiam porro cumque quaerat pariatur obcaecati.</p>
<p class="update-4">Lorem ipsum dolor.</p>
<p class="update-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, eius dolorum consectetur.</p>
<p class="update-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, dolore nesciunt nisi porro odit explicabo debitis? Iure qui, imped</p>

具有描述路线的组件App

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import reducers from './reducers'
import App from './components/App'

let store = createStore(reducers);

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.querySelector('#root')
);

你觉得这里有什么问题吗？

Answer 1

您的路由是嵌套的，这意味着子路由将在MainPage组件中呈现。有时候这是理想的，你只需要将孩子们渲染到某个地方：

class MainPage extends Component {
   render() {
      return (
        <div> { this.props.children }</div>
      )
   }
}

如果您不希望此移动内部路线：

   <Router history={browserHistory}>
        <Route path="/" component={MainPage} />
        <Route path="/favorites" component={FavoritesPage}/>
        <Route path="*" component={Error404}/>
   </Router>

react-redux应用程序中的路由不起作用

1 个答案: