是否可以通过Linkreact-router中的组件传递对象？
就像是:
<Link to='home' params={{myObj: obj}}> Click </Link>
以同样的方式,我会通过props从Parent到Child组件.
如果不可能实现这一目标的最佳方式是什么:
我有一个React + Flux应用程序,我用一些数据渲染表格.我想要做的是当我点击其中一行时,它将带我到这一行的一些细节组件.这行包含了我需要的所有数据,所以我认为如果我能通过它就会很棒Link.
另一个选项是传递idurl中的行,在详细信息组件中读取它,并通过ID从商店请求数据.
不确定实现上述目标的最佳方法是什么......
我是第一次使用React-router而且我还不知道怎么想.这是我如何在嵌套路线中加载我的组件.
入口点.js
ReactDOM.render(
<Router history={hashHistory} >
<Route path="/" component={App}>
<Route path="models" component={Content}>
</Route>
</Router>,
document.getElementById('app')
);
App.js
render: function() {
return (
<div>
<Header />
{this.props.children}
</div>
);
}
因此,我的应用程序的子项是我发送的内容组件.我正在使用Flux,我的App.js具有状态并侦听更改,但我不知道如何将该状态传递给this.props.children .在使用react-router之前,我的App.js明确地定义了所有子节点,因此传递状态是自然的,但我现在看不到如何做到这一点.
我有一个带旋转幻灯片的仪表板,每个幻灯片在Bldgs中都有一个相应的标签.两者Dashboard.js并Bldgs.js有孩子我App.js.
当用户点击特定幻灯片A时Dashboard.js,Dashboard需要告知App.js以便在路由到时App可以告诉显示Bldgs.js标签.ABldgs
我相信,我传递正确的索引值从Dashboard最高App和向下Bldgs.但是,我的App.js文件中引发了一个错误:
Uncaught TypeError: Cannot read property 'push' of undefined
在我开始将handleClick()函数传递给Dashboard组件之前,我的代码工作正常.
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { BrowserRouter as Router } from …由于React没有任何内置的管理方法document.title,我曾经在componentDidMount路由处理程序中设置它.
但是现在我需要根据state异步提取修改标题.我开始投入分配componentDidUpdate,但我时不时地忘记将document.title作业放到某些页面中,之前的标题一直存在,直到我终于注意到它为止.
理想情况下,我想要一种以document.title声明方式表达的方式,而不必分配它.鉴于我希望能够在几个嵌套级别指定文档标题,某种"假"组件可能是最方便的:
其他要求:
<noscript>);我能用什么？
有时,当使用React库,例如react-router时,我收到此错误:
未捕获的TypeError:无法读取未定义的属性'firstChild'/~/
react-router/~/react/lib/ReactMount.js?:606
我如何解决它？
我在React-Router中设置了一些嵌套路由(v0.11.6是我正在反对的),但每当我尝试访问其中一个嵌套路由时,它就会触发父路由.
我的路线看起来像这样:
<Route handler={App}>
<Route name="home" path="/" handler={availableRoutes.Splash} />
<DefaultRoute handler={availableRoutes.Splash} />
<Route name="dashboard" handler={availableRoutes.Dashboard}>
<Route name="dashboard-child" handler={availableRoutes.DashboardChild} />
</Route>
<NotFoundRoute handler={NotFound} />
</Route>
如果我将路线折叠起来,它看起来像:
<Route handler={App}>
<Route name="home" path="/" handler={availableRoutes.Splash} />
<DefaultRoute handler={availableRoutes.Splash} />
<Route name="dashboard" handler={availableRoutes.Dashboard} />
<Route name="dashboard-child" path="/dashboard/dashboard-child" handler={availableRoutes.DashboardChild} />
<NotFoundRoute handler={NotFound} />
</Route>
它工作正常.我嵌套的原因是因为我会在"仪表板"下面有多个孩子,并希望它们都dashboard在URL中加上前缀.
我使用React 15.0.2和React Router 2.4.0.我想把多个参数传递给我的路线,我不知道如何以最好的方式做到这一点:
<Route name="User" path="/user" component={UserPage}>
<Route name="addTaskModal" path="/user/manage:id" component={ManageTaskPage} />
</Route>
想要的是:
<Route name="User" path="/user" component={UserPage}>
<Route name="addTaskModal" path="/user/manage:id:type" component={ManageTaskPage} />
</Route>
我有相当简单的反应组件(Link包装器,如果路由处于活动状态,它会添加'active'类):
import React, { PropTypes } from 'react';
import { Link } from 'react-router';
const NavLink = (props, context) => {
const isActive = context.router.isActive(props.to, true);
const activeClass = isActive ? 'active' : '';
return (
<li className={activeClass}>
<Link {...props}>{props.children}</Link>
</li>
);
}
NavLink.contextTypes = {
router: PropTypes.object,
};
NavLink.propTypes = {
children: PropTypes.node,
to: PropTypes.string,
};
export default NavLink;
我该怎么测试呢？我唯一的尝试是:
import NavLink from '../index';
import expect from 'expect';
import { mount } from 'enzyme';
import React from 'react';
describe('<NavLink …我正在使用Material-ui的Tabs,它们受到控制,我将它们用于(React-router)链接,如下所示:
<Tab value={0} label="dashboard" containerElement={<Link to="/dashboard/home"/>}/>
<Tab value={1} label="users" containerElement={<Link to="/dashboard/users"/>} />
<Tab value={2} label="data" containerElement={<Link to="/dashboard/data"/>} />
如果我当前正在访问仪表板/数据并点击浏览器的后退按钮,我会(例如)转到仪表板/用户,但突出显示的选项卡仍然停留在仪表板/数据上(值= 2)
我可以通过设置状态来改变,但是当按下浏览器的后退按钮时我不知道如何处理事件？
我发现了这个:
window.onpopstate = this.onBackButtonEvent;
但每次状态改变时都会调用此命令(不仅仅是在后退按钮事件中)
我有一个问题,我不知道如何解决,我在运行npm测试时遇到此错误Invariant Violation: You should not use <Switch> outside a <Router>.问题是什么,我该如何解决？我运行的测试是带有反应的标准app.test.js
class App extends Component {
render() {
return (
<div className = 'app'>
<nav>
<ul>
<li><Link exact activeClassName="current" to='/'>Home</Link></li>
<li><Link exact activeClassName="current" to='/TicTacToe'>TicTacToe</Link></li>
<li><Link exact activeClassName="current" to='/NumGame'>Quick Maths</Link></li>
<li><Link exact activeClassName="current" to='/HighScore'>Highscore</Link></li>
<li><Link exact activeClassName="current" to='/Profile'>Profile</Link></li>
<li><Link exact activeClassName="current" to='/Login'>Sign out</Link></li>
</ul>
</nav>
<Switch>
<Route exact path='/' component={Home}></Route>
<Route path='/TicTacToe' component={TicTacToe}></Route>
<Route path='/NumGame' component={NumberGame}></Route>
<Route path='/HighScore' component={HighScore}></Route>
<Route path='/Profile' component={Profile}></Route>
<Route path='/Login' component={SignOut1}></Route>
</Switch>
</div>
);
}
};