Question

我有一个名为ContentBar的React组件，它包含一个显示动态内容的Route：

//ContentBar.js
var React = require('react')
import ContentBarRoute from '../../../../routes/contentbar.routes'

const ContentBar = () =>
(
    <ContentBarRoute />
)
export default ContentBar

我已将此ContentBar放置在我的根App结构中：

//App.js
<div className="logBar">
    <ErrorBoundary>
        <Responsive minWidth={960}>
            <ContentBar />
        </Responsive>
    </ErrorBoundary>
</div>

我已经在ContentBarRoute组件中创建了一个新菜单的路径，我在ContentBar中加载了这个菜单：

//ContactBarRoute.react.js
const ContentBarRoute = () => (
    <main>
      <Switch>
        <Route exact path="/logbar"component={LogBar}/>
        <Route path="/user/:number/settings" />
        <Route path="/user/:number/profile" />
        <Route path="/user/add" component={UserAddMenu} />
      </Switch>
    </main>
)

当我尝试从另一个组件链接到/ user / add时，我无法从另一个组件更新路由：

//Contactlist.react.js
<div className="contact-list useradd">  
    <Button as={Link} to="/user/add" className="btn-useradd">
       <FontAwesome className="icon-adduser" tag="i" name="plus" />
   </Button>
</div>

有人能帮我看看我在这里做错了什么吗？关于组件之间路由的信息不多，我在研究中找到了一个答案，但略有不同：React-Router-4 routing from another component

问题是我的路线和链接位于层次结构的不同区域，而那个人的组件都在一起。

更新另一个例子并没有谈到渲染新组件而不是旧组件，其中一个组件完全独立于另一组件：

这是我的路由器定义，它存在于将App发送到html div的类中：

import React from 'react'

import { render } from 'react-dom'
import { Provider } from 'react-redux'
//import { createStore } from 'redux'
import { HashRouter } from 'react-router-dom'
import configureStore from '../tools/store.enhancer';
import App from '../javascripts/entry';
//import rootReducer from '../app/reducers/index'

//let store = createStore(rootReducer)
const store = configureStore();

render((
  <Provider store={store}>
    <HashRouter>
      <App />
    </HashRouter>
  </Provider>
), document.getElementById('root'));

我期望的行为是为用户添加组件切换现有组件，但实际行为是当我单击按钮时没有任何反应，我收到错误

Hash history cannot PUSH the same path; a new entry will not be added to the history stack

来自另一个组件的路由的react-router链路

0 个答案: