基于 React-Route 渲染 React 组件

Question

我正在尝试在我的主要组件中基于 React、React-Router v4 和 Redux 渲染另一个组件内的特定组件'panel' 包裹在一个固定的标题和侧边栏组件中。

例如，当我从侧边栏中选择一个项目时，我会渲染 Detail 面板并根据 id 加载详细信息，例如：<Route path='/item/:id' component={ItemDetail} />

routes.js

  import React, { Component } from 'react';
    import { RouteHandler, Switch, Route, DefaultRoute } from 'react-router';
    import App from './containers/App';
    import Login from './containers/Login';
    import LobbyDetail from './components/LobbyDetail';
    export default (
      <Switch>
        <Route exact path="/" component={App} />
        <Route exact path="/login" component={Login} />
      </Switch>
    );

app.js：

import React, { Component } from 'react'
import { Router, Route, Link } from 'react-router'
import { connect } from 'react-redux'
import PropTypes from 'prop-types';
import auth from '../actions/auth';
import Sidebar from '../Components/Sidebar'

class App extends Component {
    static propTypes = {
    };

    /**
     * 
     */
    render() {
        const { ... } = this.props
        return (
            <div className="container-fluid">
                <div className="row">
                    {* I WANT TO RENDER DYNAMIC COMPONENT HERE *}
                </div>
                <Sidebar currentUser={currentUser}
                    logout={logout}
                    />
            </div>
        );
    }
}

// ...

export default connect(mapStateToProps, mapDispatchToProps)(App)

index.js（基本上是主应用）：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import { createMemoryHistory } from 'history';
import routes from './routes';
import configureStore from './store/store.js';
import { AppContainer } from 'react-hot-loader';

const syncHistoryWithStore = (store, history) => {
  const { routing } = store.getState();
  if (routing && routing.location) {
    history.replace(routing.location);
  }
};

const initialState = {};
const routerHistory = createMemoryHistory();
const store = configureStore(initialState, routerHistory);
syncHistoryWithStore(store, routerHistory);

const rootElement = document.querySelector(document.currentScript.getAttribute('data-container'));

const render = () => {

  ReactDOM.render(
    <AppContainer>
      <Provider store={store}>
        <ConnectedRouter history={routerHistory}>
          {routes}
        </ConnectedRouter>
      </Provider>
    </AppContainer>,
    rootElement
  );
}

render();

if (module.hot) { module.hot.accept(render); }

Answer 1

您正在寻找的是参数化路由。创建一个<Route/>，如下所示：<Route path='/item/:id' component={ MyComponent } />。

现在在MyComponent 中，您可以使用props.match.params.id 的值来有条件地渲染，或者如果您尝试根据:id 的值加载异步数据；您可以使用componentWillReceiveProps 生命周期方法并根据this.props.match.params.id 的值调度一个动作。

注意：<Link to='/item/some-item'/> 会将match.params.id 的值设置为'some-item'。