Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
579 views
in Technique[技术] by (71.8m points)

reactjs - React Router - passing location prop through function in Route

Is there a way to pass the location prop and own made prop to another component? I've figured out how to pass DIR_URL through a function like below but I also need to use location prop later in ConfirmAccount component to read pathname property and so on. (Of course in this way it gets true value).

import React, { Component, Fragment } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Main from './components/structure/Main';
import ConfirmAccount from './components/pages/ConfirmAccount';
import NoMatch from './components/pages/NoMatch';

class App extends Component {
  render() {
    const url = 'http://localhost:3006';
    return (
      <Fragment>
        <Router>
          <Switch>
            <Route exact path="/" component={Main} />
            <Route path="/confirm">
              {/* How can I pass the location? */}
              <Route path="/:url" component={() => <ConfirmAccount DIR_URL={url} location />} />
            </Route>
            <Route component={NoMatch} />
          </Switch>
        </Router>
      </Fragment>
    );
  }
}
export default App;

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

React Router DOM automatically passes match location and history props.

You can use the route render prop to pass them manually if you wish:

<Route path="/:url" render={(routeProps) => <ConfirmAccount DIR_URL={url} {...routeProps} />} />

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...