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

忽略exact中的<Route path='/' />。

exact只会使用给定路径呈现组件。

反应路由器v4。路线不可见。

1 个答案: