Questions tagged «react-router»

我正在使用最新版本的react-router模块，名为react-router-dom，该模块已成为使用React开发Web应用程序时的默认模块。我想知道在POST请求后如何进行重定向。我一直在编写此代码，但是在请求之后，什么都没有发生。我在网上查看过，但是所有数据都是关于React Router的先前版本的，而关于最后一个更新的则不是。 码： import React, { PropTypes } from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import { Redirect } from 'react-router' import SignUpForm from '../../register/components/SignUpForm'; import styles from './PagesStyles.css'; import axios from 'axios'; import Footer from '../../shared/components/Footer'; class SignUpPage extends React.Component { constructor(props) { super(props); …

131 javascript  reactjs  react-router 

考虑以下： var AppRoutes = [ <Route handler={App} someProp="defaultProp"> <Route path="/" handler={Page} /> </Route>, <Route handler={App} someProp="defaultProp"> <Route path="/" handler={Header} > <Route path="/withheader" handler={Page} /> </Route> </Route>, <Route handler={App} someProp="defaultProp"> <Route path=":area" handler={Area} /> <Route path=":area/:city" handler={Area} /> <Route path=":area/:city/:locale" handler={Area} /> <Route path=":area/:city/:locale/:type" handler={Area} /> </Route> ]; 我有一个具有相同处理程序的App模板，HeaderTemplate和参数化路由集（在App模板内）。我希望能够在找不到某些内容时提供404路线。例如，/ CA / …

130 react-router 

我正在尝试将React map组件添加到我的项目中，但是遇到错误。我使用Fullstack React的博客文章作为参考。我在google_map.js第83行中查找了引发错误的位置： function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 到目前为止，这是我的地图组件。当我注释掉第58-60行（最后三行）时，页面加载正常（没有地图）。编辑：我做了@Dmitriy Nevzorov建议的更改，它仍然给我相同的错误。 import React from 'react' import GoogleApiComponent from 'google-map-react' export class LocationsContainer extends React.Component { constructor() { super() } render() { const style = { width: …

129 javascript  google-maps  reactjs  ecmascript-6  react-router 

两者都有路由，链接等。何时使用一个或另一个？我真的很困惑在哪里使用每个。服务器端？客户端？ https://reacttraining.com/react-router/ 在某些示例中，您需要传递历史记录，而在其他示例中则不需要。该怎么办？ <Router history={browserHistory}> 与 <Router> 何时使用一个或另一个非常令人困惑，任何帮助都值得赞赏。

123 reactjs  react-router 

我试图实现经过身份验证的路由，但是发现React Router 4现在阻止了它的工作： <Route exact path="/" component={Index} /> <Route path="/auth" component={UnauthenticatedWrapper}> <Route path="/auth/login" component={LoginBotBot} /> </Route> <Route path="/domains" component={AuthenticatedWrapper}> <Route exact path="/domains" component={DomainsIndex} /> </Route> 错误是： 警告：您不应使用<Route component>和<Route children>在同一路线上；<Route children>将被忽略 在这种情况下，实现此目标的正确方法是什么？ 它出现在react-router（v4）文档中，提示类似 <Router> <div> <AuthButton/> <ul> <li><Link to="/public">Public Page</Link></li> <li><Link to="/protected">Protected Page</Link></li> </ul> <Route path="/public" component={Public}/> <Route path="/login" component={Login}/> <PrivateRoute …

122 javascript  reactjs  react-router  react-router-v4 

谁能告诉我如何返回上一页而不是特定路线？ 使用此代码时： var BackButton = React.createClass({ mixins: [Router.Navigation], render: function() { return ( <button className="button icon-left" onClick={this.navigateBack}> Back </button> ); }, navigateBack: function(){ this.goBack(); } }); 收到此错误，因为没有路由器历史记录，所以goBack（）被忽略了 这是我的路线： // Routing Components Route = Router.Route; RouteHandler = Router.RouteHandler; DefaultRoute = Router.DefaultRoute; var routes = ( <Route name="app" path="/" handler={OurSchoolsApp}> <DefaultRoute name="home" …

121 javascript  reactjs  react-router 

我有以下内容： 如何摆脱蓝色下划线？代码如下： <Link to="first"><MenuItem style={{paddingLeft: 13, textDecoration: 'none'}}> Team 1 </MenuItem></Link> MenuItem组件来自http://www.material-ui.com/#/components/menu 任何见解或指导将不胜感激。先感谢您。

121 javascript  reactjs  react-router 

我正在创建一个使用webpack-dev-server和react-router进行开发的应用程序。 似乎webpack-dev-server是建立在以下假设的基础上的：您将在一个位置拥有一个公共入口点（即“ /”），而react-router允许无限数量的入口点。 我想要webpack-dev-server的好处，特别是对生产力非常有用的热重载功能，但是我仍然希望能够加载react-router中设置的路由。 一个人如何才能实现它以使其协同工作？您能以这种方式在webpack-dev-server前面运行快速服务器吗？

117 javascript  reactjs  webpack  react-router 

我似乎找不到不使用来使用react-router更新查询参数的方法<Link/>。hashHistory.push(url)似乎没有注册查询参数，并且似乎也不能将查询对象或任何内容作为第二个参数传递。 如何从更改URL /shop/Clothes/dresses，以/shop/Clothes/dresses?color=blue在反应路由器没有使用<Link>？ 而且是一个onChange真正的函数来监听查询变化的唯一途径？为什么没有自动检测到查询更改并对参数更改做出反应？

117 reactjs  react-router 

我希望我的ReactJS应用在离开特定页面时通知用户。特别是一条弹出消息，提醒他/她进行以下操作： “更改已保存，但尚未发布。现在执行吗？” 我应该在react-router全局范围内触发此操作，还是可以在react页面/组件内完成此操作？ 我还没有发现任何关于后者的信息，我宁愿避免使用第一个。除非当然是其规范，否则这使我想知道如何执行这样的事情而不必将代码添加到用户可以访问的所有其他可能的页面中。 欢迎有任何见解，谢谢！

115 reactjs  react-router 

我正在使用webpack和HtmlWebpackPlugin将捆绑的js和css注入html模板文件中。 new HtmlWebpackPlugin({ template: 'client/index.tpl.html', inject: 'body', filename: 'index.html' }), 并生成以下html文件。 <!doctype html> <html lang="en"> <head> ... <link href="main-295c5189923694ec44ac.min.css" rel="stylesheet"> </head> <body> <div id="app"></div> <script src="main-295c5189923694ec44ac.min.js"></script> </body> </html> 当访问应用程序的根目录时，此方法工作正常localhost:3000/，但是当我尝试从另一个URL访问应用程序时，此方法将失败，例如，localhost:3000/items/1因为捆绑的文件未注入绝对路径。加载html文件时，它将在不存在的/items目录中查找js文件，因为react-router尚未加载。 如何获得HtmlWebpackPlugin以绝对路径注入文件，所以express将在我的/dist目录的根目录而不是在目录的根目录查找它们/dist/items/main-...min.js？或者，也许我可以更改我的快速服务器以解决此问题？ app.use(express.static(__dirname + '/../dist')); app.get('*', function response(req, res) { res.sendFile(path.join(__dirname, '../dist/index.html')); }); 本质上，我只需要了解以下内容： <script src="main...js"></script> 在源代码的开头加上斜线。 <script src="/main...js></script>

114 javascript  express  webpack  react-router 

我将相同的组件用于三种不同的路线： <Router> <Route path="/home" component={Home} /> <Route path="/users" component={Home} /> <Route path="/widgets" component={Home} /> </Router> 无论如何有结合起来的样子，就像： <Router> <Route path=["/home", "/users", "/widgets"] component={Home} /> </Router>

113 javascript  reactjs  path  react-router  url-routing 

由于我正在使用react-router来处理我的React应用程序中的路由，因此我很好奇是否可以重定向到外部资源。 假设有人点击： 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" }

113 javascript  reactjs  redirect  react-router  react-router-redux 

我在客户端上为我的应用程序使用react和react-router。我似乎无法弄清楚如何从如下网址获取以下查询参数： http://xmen.database/search#/?status=APPROVED&page=1&limit=20 我的路线如下所示（我知道该路线完全错误）： var routes = ( <Route> <DefaultRoute handler={SearchDisplay}/> <Route name="search" path="?status=:status&page=:page&limit=:limit" handler={SearchDisplay}/> <Route name="xmen" path="candidate/:accountId" handler={XmenDisplay}/> </Route> ); 我的路线工作正常，但我不确定如何格式化路径以获取所需的参数。感谢任何帮助！

112 javascript  reactjs  client-side  react-router  client-side-scripting 

导航到另一个页面时出现问题，其位置将保持与以前的页面相同。所以它不会自动滚动到顶部。我也尝试window.scrollTo(0, 0)在onChange路由器上使用。我还使用了scrollBehavior来解决此问题，但没有成功。有什么建议吗？

112 javascript  reactjs  react-router  react-router-redux