Question

我有一个使用react-router-dom v4工作的基本路由SPA，我希望得到当前路径（路径名），以便在我的标题中使用（应用程序的外部环境 - 不确定这是否是准确的命名法）。我想在我的应用栏中有一个按钮，它会根据当前使用的路线执行某些操作。

index.js

ReactDOM.render((
  <MuiThemeProvider>
    <div>
      <Router history={history}>
        <div>
          <Header />
          <MainView />
        </div>
      </Router>
    </div>
  </MuiThemeProvider>
), document.getElementById('app'));

header.js

class Header extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      open: false
    };
  }

  toggleDrawer(){
    this.setState({open: !this.state.open}, ()=> {console.log(this.state)});
  }

  render() {
    return (
      <div>
        <AppBar
          iconClassNameRight="muidocs-icon-navigation-expand-more"
          onLeftIconButtonTouchTap={()=>{this.toggleDrawer()}}
          iconElementRight={<FlatButton label="Create New"/>}
        />

        ...

在header.js我想要访问路线的路径名，以便从应用栏右侧的<FlatButton />调用某个功能。我按照v4文档尝试了{this.props.location.pathname}，但只有错误。 TBH我可能使用它错了。

Answer 1

该道具仅提供给呈现为Route子项的组件。如果你想要它在其他地方（比如你的Header），你可以使用withRouter帮助器方法将道具注入你的组件：

// Header.js
import { withRouter } from 'react-router';

// private header class
class Header extends React.Component {
   render() {
      // you can access this.props.location here
   }
}

// wrap Header class in a new class that will render the
// Header class with the current location
// export this class so other classes will render this
// wrapped component
export default withRouter(Header);

// index.js
// ....
ReactDOM.render((
  <MuiThemeProvider>
    <div>
      <Router history={history}>
        <div>
          <Header />
          <MainView />
        </div>
      </Router>
    </div>
  </MuiThemeProvider>
), document.getElementById('app'));

Answer 2

如果你没有使用它，你应该使用react-router-dom（它现在是网络的默认react-router包）。

import { BrowserRouter, Route, Link } from 'react-router-dom';

ReactDOM.render((
  <MuiThemeProvider>
    <div>
      <BrowserRouter>
        <div>
          <Route component={Header} />
          <Route exact path="/" component={MainView} />
        </div>
      </BrowserRouter>
    </div>
  </MuiThemeProvider>
), document.getElementById('app'));

然后从header.js尝试使用

this.props.location.pathname

在全局中获取路径的路径名称

2 个答案: