反應路由器v4。路線不可見。

Question

我正在使用router v3並開始重構路由邏輯根據v4爲了進一步實現transition-groups並提出了以下代碼。在編譯時或在控制檯中沒有錯誤，當我轉到/#/about時，它返回一個空白頁面。

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Store from './container/store/store'; 
import Container from './container/container'; 


const MOUNT_NODE = document.getElementById('root'); 

const render =() => { 
    const store = Store({}); 

    ReactDOM.render(
     <Container store={store} />, 
    MOUNT_NODE 
); 
}; 


// Hot Module Replacement 
if (module.hot) { 
    module.hot.accept('./routes/index',() => 
    setImmediate(() => { 
     ReactDOM.unmountComponentAtNode(MOUNT_NODE); 
     render(); 
    }) 
    // This method is used to break up long running operations and run a callback function immediately after the browser has completed other operations such as events and display updates. 
); 
}; 

render(); 

container.js（掛接終極版到應用程序）

import React, { Component, PropTypes } from 'react'; 
import { Provider } from 'react-redux'; 
import { HashRouter, Switch, Route } from 'react-router-dom'; 


// Wrap 
import Wrap from '../wrap'; 
import Contact from '../routes/contact'; 


export default class Container extends Component { 
    static propTypes = { 
    store: PropTypes.object.isRequired 
    } 

    shouldComponentUpdate() { 
    return false; 
    } 

    render() { 
    const { store } = this.props; 

    return (
     <Provider store={store}> 
     <HashRouter> 
      <Switch> 
      <Route exact path='/' component={Wrap}/> 
      </Switch> 
      </HashRouter> 
     </Provider> 
    ) 
    } 
} 

wrap.js（可以作爲索引路線）

import React, { Component } from 'react'; 
import Header from '../components/header'; 
import styles from './styles/styles.css'; 
import { HashRouter, Switch, Redirect, Route, BrowserRouter, Link} from 'react-router-dom'; 

import About from '../routes/about'; 


export default class Wrap extends Component { 

    constructor(props) { 
    super(props); 
    } 

    render() { 

    return (
     <div> 
     <Header location={this.props.location} /> 
     <Route path='/about' component={About}/> 
     ... other stuff 
     </div> 
    ) 
    } 
} 

Answer 1

在您的<Route path='/' />中省略exact。

exact只會渲染具有給定路徑的組件。