传递道具到路线[重复]

Question

如何通过

import React, { Component } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';

import Repos from './Repos';
import Org from './Org';
import Profile from './Profile';

class Routes extends Component {
  render() {
    return (
        <Switch>
          <Route exact path="/" render={() => (
           <Redirect to='/profile' />
          )} />
          <Route exact path="/profile" component={Profile} />
          <Route exact path="/repos" component={Repos} />
          <Route exact path="/org" component={Org} />
        </Switch>
    );
  } 
}

export default Routes;

这就是我如何从D调用路由组件ashboard.js.

import React from 'react';

import Routes from './Routes';
import Header from './Header';

const Dashboard = props => {
  return (
    <div>
      <Header />
      <Routes />
    </div>
  );
};

export default Dashboard;

我需要通过




Answer 1

您可以使用路由的渲染道具而不是组件道具，并在组件上散布所有路由道具和路由道具。

class Routes extends Component {
  render() {
    return (
      <Switch>
        <Route exact path="/" render={() => <Redirect to="/profile" />} />
        <Route
          exact
          path="/profile"
          render={props => <Profile {...this.props} {...props} />}
        />
        <Route
          exact
          path="/repos"
          render={props => <Repos {...this.props} {...props} />}
        />
        <Route
          exact
          path="/org"
          render={props => <Org {...this.props} {...props} />}
        />
      </Switch>
    );
  }
}