我一直在收到错误:
"路由器"可能只有一个子元素
当使用react-router时.
我似乎无法弄清楚为什么这不起作用,因为它与他们在示例中显示的代码完全相同:https://reacttraining.com/react-router/web/guides/quick-start
这是我的代码:
import React from 'react';
import Editorstore from './Editorstore';
import App from './components/editor/App';
import BaseLayer from './components/baselayer';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import {render} from 'react-dom';
const root = document.createElement('div');
root.id = 'app';
document.body.appendChild(root);
const store = new Editorstore();
const stylelist = ['https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css', 'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css', 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css', 'https://api.tiles.mapbox.com/mapbox-gl-js/v0.33.1/mapbox-gl.css'];
stylelist.map((link) => {
const a = document.createElement('link');
a.rel = 'stylesheet';
a.href = link;
document.body.appendChild(a);
return null;
});
render((
<Router>
<Route exact path="/" component={BaseLayer} />
<Route …我是React Router的新手,了解到有很多方法可以重定向页面:
运用 browserHistory.push("/path")
import { browserHistory } from 'react-router';
//do something...
browserHistory.push("/path");
运用 this.context.router.push("/path")
class Foo extends React.Component {
constructor(props, context) {
super(props, context);
//do something...
}
redirect() {
this.context.router.push("/path")
}
}
Foo.contextTypes = {
router: React.PropTypes.object
}
在React Router v4中,有this.context.history.push("/path")和this.props.history.push("/path").详细信息:如何在React Router v4中推送到历史记录？
我对所有这些选项感到困惑,有没有最好的方法来重定向页面？
由于我正在使用react-router来处理反应应用程序中的路由,所以我很好奇是否有办法重定向到外部资源.
说某人点击:
example.com/privacy-policy
我希望它重定向到:
example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies
我正在寻找零帮助,以避免在我的index.html加载时用简单的JS编写它,例如:
if ( window.location.path === "privacy-policy" ){
window.location = "example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies"
}
试图让react-router(v4.0.0)和react-hot-loader(3.0.0-beta.6)很好地播放,但是在浏览器控制台中得到以下错误:
警告:React.createElement:type无效 - 期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:undefined.您可能忘记从其定义的文件中导出组件.
index.js:
import React from 'react';
import ReactDom from 'react-dom';
import routes from './routes.js';
require('jquery');
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import './css/main.css';
const renderApp = (appRoutes) => {
ReactDom.render(appRoutes, document.getElementById('root'));
};
renderApp( routes() );
routes.js:
import React from 'react';
import { AppContainer } from 'react-hot-loader';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import store from './store/store.js';
import { Provider } from 'react-redux';
import App from './containers/App.jsx';
import Products from './containers/shop/Products.jsx';
import Basket from './containers/shop/Basket.jsx';
const routes …我刚刚将react-router-dom升级到v6beta，因为我想组织我的路线，但404页面现在已损坏：
export function AllRoutes(props) {
return(
<Routes>
<Route path="/about-us">
<Route path="contact"> <AboutContact/> </Route>
<Route path="our-logo"> <AboutLogo/> </Route>
<Route path="the-mission"> <AboutMission/> </Route>
<Route path="the-team"> <AboutTeam/> </Route>
<Route path="our-work"> <AboutWork/> </Route>
</Route>
<Route path="/user">
<Route path="sign-in"> <UserSignIn/> </Route>
<Route path="sign-up"> <UserSignUp/> </Route>
</Route>
<Route path="/">
<Home/>
</Route>
<Route >
<NotFound/>
</Route>
</Routes>
)
}
因此，除了未找到的页面之外，一切都按预期工作（包括主页），即使添加path="/*"或添加也无法工作path="*"
有什么简单的解决方案吗？
有谁知道如何限制对react-router中特定路由的访问？我想在允许访问特定路由之前检查用户是否已登录.我认为这很简单,但文档并不清楚如何做到这一点.
这是我应该在我定义<Route>组件的地方设置的,还是我应该在组件处理程序中处理它？
<Route handler={App} path="/">
<NotFoundRoute handler={NotFound} name="not-found"/>
<DefaultRoute handler={Login} name="login"/>
<Route handler={Todos} name="todos"/> {/* I want this to be restricted */}
</Route>
我有一个带搜索面板的网页.搜索面板有几个输入字段:id,size,...
我想要的是当用户设置搜索值(例如:id = 123和size = 45)并按下搜索按钮时:
另一方面,如果用户将URL更改为http:// mydomain/home？id = 111&size = 22,则:
如何达成目标？我应该使用什么路由器(react-router,redux-router,react-router-redux ot other)？
react-router redux-framework redux react-redux react-router-redux
导航到另一个页面时出现问题,其位置将保持与之前的页面相同.所以它不会自动滚动到顶部.我也试过window.scrollTo(0, 0)在onChange路由器上使用.我也使用scrollBehavior来解决这个问题,但它没有用.对此有何建议？
我正在尝试在我的反应网站上设置Google Analytics,并且遇到了一些软件包,但是没有一个软件包具有我在示例方面的设置.希望有人可以对此有所了解.
我正在看的包是,react-ga.
我的渲染方法index.js看起来像这样.
React.render((
<Router history={createBrowserHistory()}>
<Route path="/" component={App}>
<IndexRoute component={Home} onLeave={closeHeader}/>
<Route path="/about" component={About} onLeave={closeHeader}/>
<Route path="/gallery" component={Gallery} onLeave={closeHeader}/>
<Route path="/contact-us" component={Contact} onLeave={closeHeader}>
<Route path="/contact-us/:service" component={Contact} onLeave={closeHeader}/>
</Route>
<Route path="/privacy-policy" component={PrivacyPolicy} onLeave={closeHeader} />
<Route path="/feedback" component={Feedback} onLeave={closeHeader} />
</Route>
<Route path="*" component={NoMatch} onLeave={closeHeader}/>
</Router>), document.getElementById('root'));
我正在尝试设置一些嵌套路由来添加公共布局.检查代码:
<Router>
<Route component={Layout}>
<div>
<Route path='/abc' component={ABC} />
<Route path='/xyz' component={XYZ} />
</div>
</Route>
</Router>
虽然这很好用,但我仍然收到警告:
警告:您不应在同一路线中使用<Route component>和<Route children>; 将被忽略