Question

查看this video反应路由器似乎很容易使用，但我找不到如何在我的代码中导航，因为我想链接点击div而不是<Link>。

我已经搜索了StackOverflow但未找到任何适用于4.0的答案。尝试导入browserHistory会在this question之前提供未定义的（安装＆＃39; react-router＆＃39;以及＆＃39; react-router-dom＆＃39;之前和之后）：

import { browserHistory } from 'react-router';
console.log('browserHistory:', browserHistory);

我还看到某个地方有一个＆＃39;背景＆＃39;你可以去，但这显示了匹配＆＃39;的价值。但不是＆＃39; context＆＃39;：

<Route path="/" render={({ match, context}) => {
    console.log('match:', match);
    console.log('context:', context);

修改

在开发工具中我可以看到＆＃34;路由器＆＃34;有一个历史属性，所以当我补充说我可以得到它：

<Route path="/" render={({ match, context, history}) => {

有没有办法从路线外到达？例如，导航到其他组件但不在Route本身内的导航栏组件...

Answer 1

如果我理解你的问题，这就是你如何建立链接的方式。

public class Calc {

    private List<String> inputs = new ArrayList<>();

    public String calculate(List<String> input){
        String result = "";
        for(String current : input){
            switch (current) {
                case "(":
                    // do stuff
                case "+":
                    //do stuff
                default:
                    // do stuff
            }
        }
        return result;
    }

    btnPlus.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
            // add to list, and call calculate
        }
    }); // end btnPlus
}

Answer 2

不得不更多地阅读文档。 history对象仅使用component上的Route（或其他）属性作为属性传递。显然需要包含“历史记录”包并使用createBrowserHistory并将其传递给Router，然后在Route中指定该组件。我认为这应该可以正常工作，因为未指定exact ...

import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
ReactDOM.render( (
    <Router history={ history }>
      <Route path="/" component={ App } />
    </Router>
  ),
  document.getElementById('root')
);

在我<App/>内<Router>并且无法访问这些属性之前。

Answer 3

为什么不将你的div包裹在链接中而不是试图绕过它并让你的生活更轻松？

    <Link to="/" >
       <div className="to-component">go to component</div>
    </Link>

使用react-router-dom 4.0在代码中导航？

3 个答案: