리액터 라우터 v4. 경로가 표시되지 않습니다.

Question

나는 transition-groups을 구현하기 위해 router v3을 사용 중이었고 v4에 따라 라우팅 논리를 리팩터링하기 시작했으며 다음 코드를 제안했습니다. 컴파일 중 또는 콘솔에서 오류가 없습니다. /#/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 (애플리케이션에 돌아 오는 최대 후크)

wrap.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> 
    ) 
    } 
} 

은 (행 인덱스로 동작)

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은 지정된 경로로만 구성 요소를 렌더링합니다.