反应路由器 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（将 redux 连接到应用程序）

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 只会渲染具有给定路径的组件。