随着react-router我可以使用Link元素创建的原生处理反应路由器链接.
我看到内部调用this.context.transitionTo(...).
我想进行导航,但不是从链接,例如下拉选择.我怎么能在代码中这样做？什么是this.context？
我看到了Navigationmixin,但是我可以不用mixin吗？
我正在使用React-router,当我点击链接按钮时它工作正常,但是当我刷新我的网页时它没有加载我想要的东西.
例如,我进入localhost/joblist,一切都很好,因为我来到这里按一个链接.但是,如果我刷新网页,我得到:不能GET/joblist
默认情况下它没有像这样工作.最初我有我的URL:localhost /#/和localhost /#/ joblist,他们工作得非常好.但是我不喜欢这种网址,所以试图抹去我写的'#':
Cannot GET /joblist
localhost /不会发生这个问题,这个问题总是返回我想要的.
编辑:这个应用程序是单页面,因此/ joblist不需要向任何服务器询问任何内容.
EDIT2:我的整个路由器.
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, document.body);
});
我收到此错误:
未捕获错误:不变违规:元素类型无效:期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:object.
这是我的代码:
var React = require('react')
var ReactDOM = require('react-dom')
var Router = require('react-router')
var Route = Router.Route
var Link = Router.Link
var App = React.createClass({
render() {
return (
<div>
<h1>App</h1>
<ul>
<li><Link to="/about">About</Link></li>
</ul>
</div>
)
}
})
var About = require('./components/Home')
ReactDOM.render((
<Router>
<Route path="/" component={App}>
<Route path="about" component={About} />
</Route>
</Router>
), document.body)
我的Home.jsx文件:
var React = require('react');
var RaisedButton = require('material-ui/lib/raised-button');
var Home = React.createClass({
render:function() {
return (
<RaisedButton label="Default" /> …如何在routes.jsx文件中定义路由,以便__firebase_request_key从服务器重定向后从Twitter的单点登录进程生成的URL中捕获参数值？
http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla
我尝试使用以下路由配置,但是:redirectParam没有捕获所提到的参数:
<Router>
<Route path="/" component={Main}>
<Route path="signin" component={SignIn}>
<Route path=":redirectParam" component={TwitterSsoButton} />
</Route>
</Route>
</Router>
在当前版本的React Router(v3)中,我可以接受服务器响应并使用它browserHistory.push来转到相应的响应页面.但是,这在v4中不可用,我不确定处理它的适当方法是什么.
在此示例中,使用Redux,在用户提交表单时调用components/app-product-form.jsthis.props.addProduct(props).当服务器返回成功时,用户将进入购物车页面.
// actions/index.js
export function addProduct(props) {
return dispatch =>
axios.post(`${ROOT_URL}/cart`, props, config)
.then(response => {
dispatch({ type: types.AUTH_USER });
localStorage.setItem('token', response.data.token);
browserHistory.push('/cart'); // no longer in React Router V4
});
}
如何从React Router v4的功能重定向到Cart页面？
我使用React Router为我的React.js应用程序提供了以下结构:
var Dashboard = require('./Dashboard');
var Comments = require('./Comments');
var Index = React.createClass({
render: function () {
return (
<div>
<header>Some header</header>
<RouteHandler />
</div>
);
}
});
var routes = (
<Route path="/" handler={Index}>
<Route path="comments" handler={Comments}/>
<DefaultRoute handler={Dashboard}/>
</Route>
);
ReactRouter.run(routes, function (Handler) {
React.render(<Handler/>, document.body);
});
我想将一些属性传递给Comments组件.
(通常我会这样做<Comments myprop="value" />)
使用React Router,最简单,最正确的方法是什么？
我想声明一个带有可选路径参数的路径,因此当我添加页面以执行额外的操作时(例如填充一些数据):
http:// localhost/app/path/to/page <=呈现页面 http:// localhost/app/path/to/page/pathParam <=根据pathParam呈现包含一些数据的页面
在我的反应路由器中,我有以下路径,以支持这两个选项(这是一个简化的例子):
<Router history={history}>
<Route path="/path" component={IndexPage}>
<Route path="to/page" component={MyPage}/>
<Route path="to/page/:pathParam" component={MyPage}/>
</Route>
</Router>
我的问题是,我们可以在一条路线上宣布它吗？如果我只添加第二行,则找不到没有参数的路径.
编辑#1:
这里提到的关于以下语法的解决方案对我不起作用,它是否合适？它是否存在于文档中？
<Route path="/product/:productName/?:urlID?" handler={SomeHandler} />
我的react-router版本是:1.0.3
npm run start在终端中运行时出现以下错误。
尝试导入错误：“重定向”未从“react-router-dom”导出。
我已经重新安装了node_modules，，react-router-dom。react-router还重新启动了终端和我的计算机，但问题仍然存在。
我的代码：
import React from 'react';
import { Switch, Redirect } from 'react-router-dom';
import { RouteWithLayout } from './components';
import { Minimal as MinimalLayout } from './layouts';
import {
Login as LoginView,
Dashboard as DashboardView,
NotFound as NotFoundView
} from './views';
const Routes = () => {
return (
<Switch>
<Redirect
exact
from="/"
to="/dashboard"
/>
<RouteWithLayout
component={routeProps => <LoginView {...routeProps} data={data} />}
exact
layout={MinimalLayout}
path="/login"
/>
<Redirect to="/not-found" /> …我目前正在使用react router v4进行嵌套路由.
最接近的示例是React-Router v4文档中的路由配置 .
我想将我的应用程序拆分为两个不同的部分.
前端和管理区域.
我在考虑这样的事情:
<Match pattern="/" component={Frontpage}>
<Match pattern="/home" component={HomePage} />
<Match pattern="/about" component={AboutPage} />
</Match>
<Match pattern="/admin" component={Backend}>
<Match pattern="/home" component={Dashboard} />
<Match pattern="/users" component={UserPage} />
</Match>
<Miss component={NotFoundPage} />
前端具有与管理区域不同的布局和样式.因此,在首页的路线回家,约一个应该是儿童路线.
/ home应该呈现在Frontpage组件中,而/ admin/home应该在Backend组件中呈现.
我尝试了一些变化,但我总是在没有击中/ home或/ admin/home.
编辑 - 19.04.2017
因为这篇文章现在有很多观点我用最终解决方案更新了它.我希望它对某人有帮助.
编辑 - 08.05.2017
删除旧解决方案
最终解决方案
这是我现在使用的最终解决方案.此示例还有一个全局错误组件,如传统的404页面.
import React, { Component } from 'react';
import { Switch, Route, Redirect, Link } from 'react-router-dom';
const Home = () => <div><h1>Home</h1></div>; …我正在尝试升级到 React Router v6 ( react-router-dom 6.0.1)。
这是我更新的代码：
\nimport { BrowserRouter, Navigate, Route, Routes } from \'react-router-dom\';\n\n<BrowserRouter>\n <Routes>\n <Route path="/" element={<Home />} />\n <Route path="/lab" element={<Lab />} />\n <Route render={() => <Navigate to="/" />} />\n </Routes>\n</BrowserRouter>\n最后Route是将其余路径重定向到/.
但是，我收到了一个错误
\n\n\nTS2322：类型 \'{ 渲染：() => 元素；}\' 不可分配给类型“IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)\”。\xc2\xa0\xc2\xa0Property \'render\' 在类型 \'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)\' 上不存在。
\n
然而，根据文档，它确实有renderfor Route. …