使用 React Router 在组件之间导航答案

【问题标题】：Navigation between components with React Router使用 React Router 在组件之间导航
【发布时间】：2018-02-09 14:12:19
【问题描述】：

早上好！我对这整个 {react, redux, routers} 很陌生。现在我被困在组件之间的导航上。

我已经开发了我的路线（scr/routes 上的 index.js）：

export default function() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path='/' exact render={props => <Home {...props}/>} />
        ...
      </Switch>
    </BrowserRouter>
  )
}

并将它们放在这里（src/containers 上的 layout.js）：

export class App extends React.Component {
...
    return (
      <Layout className="main-layout">
        <Sider className='sider'>
          ...
         <SideMenu/> //This is the component that i'm click for change the "pages"
        </Sider>
        <Layout>
          <Header className="app-header">
            ...
          </Header>         

              <Routes/>

        </Layout>
      </Layout>
    )        
  }
}

如果我手动更改 URL，则可以在页面之间导航，换句话说：我的路线是有效的。

但是，在我的 Sidemenu 组件上，我怎样才能放置一个实际更改路线的 Onclick 函数，因为“this.props.history.push('/somepath')”在其他不是原始组件的组件中不起作用这个例子？

这是我的 sidemenu 组件（src/components 上的 sidemenu.js）：

export class SideMenu extends React.Component {

  handleClick(e){
    switch(e.key){
      case '1':
          console.log('Home')          
          break;
      case '2.1':
          console.log('Cadastro de grupo')
          break;
      case '2.2':
          console.log('Cadastro de Produto')
          break; 
      case '2.3':
          console.log('Cadastro de Estação')
          break;
      case '2.4':
          console.log('Cadastro de Usuário')
          break; 
      case '2.5':
          console.log('Pagamento')
          break;   
      default:
          console.log('Click não associado')
    }
  }

  render() {

    return (
        <Menu
          onClick={this.handleClick}
          mode="vertical"
          theme="light"
          className="side-menu"
        >
          <Menu.Item className="text-black" key="1">
            <Icon id='dark' type="home" />
            <span>Inicio</span>
          </Menu.Item>

          <SubMenu className="text-black"/><span>Cadastros</span></span>}>
            <Menu.Item className="text-black" key="2.1">Grupo</Menu.Item>
            <Menu.Item className="text-black" key="2.2">Produto</Menu.Item>
            <Menu.Item className="text-black" key="2.3">Estação</Menu.Item>
            <Menu.Item className="text-black" key="2.4">Usuário</Menu.Item>
            <Menu.Item className="text-black" key="2.5">Pagamento</Menu.Item>
          </SubMenu>
         ...
        </Menu>            
    )
  }
}

感谢您的帮助，如果需要更多代码或示例，请告诉我。

【问题讨论】：

标签： javascript reactjs react-redux react-router-v4

【解决方案1】：

react-router 提供了一个<Link> 和一个<Redirect> 组件来动态改变位置。通常不需要自己操作。

阅读documentation了解详情。

【讨论】：

我做了以下更改：Cadastros Grupo ... 当我点击任何地方时，还添加“import { Route, BrowserRouter, Link } from 'react-router-dom'”菜单组件我在控制台上收到以下错误：“上下文类型失败：上下文router 在Link 中标记为必需，但其值为undefined。”
抱歉，它缺少包含整个菜单的标签。现在我有其他问题：单击该选项时，URL 会更改，但组件不会更改。我必须点击地址栏并按回车来更改组件。