标签: react-router

位置“/”处的匹配叶路由没有元素。这意味着默认情况下它将呈现空值，从而导致“空”页面

//App.js File

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
// import ReactDOM from "react-dom";


const App = () => {
  return (

    <Router >
      <Routes>

        <Route path="/" component={ Home }></Route>
      </Routes>
    </Router>


  )
}

export default App;

我的任何与路由器相关的代码都不起作用，我不知道为什么当我开始在程序中插入一些路由时会发生这种情况，因此它显示此错误

我们如何this.props.history.push('/page')在React-Router v4中传递参数？

.then(response => {
       var r = this;
        if (response.status >= 200 && response.status < 300) {
             r.props.history.push('/template');
          });

我正在尝试在我的 React 应用程序中使用react-router-dom，并且我正在使用打字稿而不是 javascript。这里的问题是我无法将 Route 导入到我的组件中并使其工作。我已经安装了@types/react-router-dom，但由于某种原因它仍然无法按预期工作。

这是一个正在尝试使用的组件react-router-dom

import {BrowserRouter as Router, Route} from "react-router-dom";

const App = () => {
    return (
        <div>
            <Router>
                <div>
                    <Route path="/" exact/>
                </div>
            </Router>
        </div>
    )
}

export default App;

这就是我收到的错误

TypeScript error in /Users/veselinkontic/Projects/givellet/frontend/src/components/index.tsx(9,37):
Type '{ path: string; exact: true; }' is not assignable to type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.
  Property 'exact' does not exist on type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.  TS2322 …

React路由器允许反应应用程序处理/arbitrary/route.为了实现这一点,我需要我的服务器在任何匹配的路由上发送React应用程序.

但是webpack dev服务器不处理任意端点.

这里有一个使用附加快速服务器的解决方案. 如何允许webpack-dev-server允许来自react-router的入口点

但我不想启动另一个快速服务器以允许路由匹配.我只是想告诉webpack dev服务器匹配任何网址并发送给我我的反应应用程序.请.

我想显示一个title以<AppBar />某种方式从当前路线传入的内容.

在React Router v4中,如何<AppBar />才能将当前路由传递给它的title道具？

  <Router basename='/app'>
    <main>
      <Menu active={menu} close={this.closeMenu} />
      <Overlay active={menu} onClick={this.closeMenu} />
      <AppBar handleMenuIcon={this.handleMenuIcon} title='Test' />
      <Route path='/customers' component={Customers} />
    </main>
  </Router>

有没有办法通过从自定义自定义标题prop上<Route />？

我正在使用react-react进行反应.我试图在反应路由器的"链接"中传递属性

var React  = require('react');
var Router = require('react-router');
var CreateIdeaView = require('./components/createIdeaView.jsx');

var Link = Router.Link;
var Route = Router.Route;
var DefaultRoute = Router.DefaultRoute;
var RouteHandler = Router.RouteHandler;
var App = React.createClass({
  render : function(){
    return(
      <div>
        <Link to="ideas" params={{ testvalue: "hello" }}>Create Idea</Link>
        <RouteHandler/>
      </div>
    );
  }
});

var routes = (
  <Route name="app" path="/" handler={App}>
    <Route name="ideas" handler={CreateIdeaView} />
    <DefaultRoute handler={Home} />
  </Route>
);

Router.run(routes, function(Handler) {

  React.render(<Handler />, document.getElementById('main'))
});

"链接"呈现页面但不将属性传递给新视图.以下是视图代码

var React = require('react');
var …

我正在使用React和Redux来开发一个webapp,当我启动我的项目时,我得到了这个:

Line 13:  Unexpected use of 'location'  no-restricted-globals

Search for the keywords to learn more about each error.

我搜索了很多关于如何解决它的问题,但我找到的答案都没有帮助我,所以我转向Stack溢出.

有谁知道如何解决这个错误？我很感激能得到的所有帮助.

我正在尝试将React地图组件添加到我的项目中但遇到错误.我正在使用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: '100vw',
        height: '100vh'
    }
    return (
      <div style={style}>
        <Map google={this.props.google} />
      </div>
    )
  }
}

export class Map extends React.Component {
    componentDidUpdate(prevProps, prevState){
        if (prevProps.google !== this.props.google){
            this.loadMap();
        } …

我正在创建一个使用webpack-dev-server开发的应用程序以及react-router.

似乎webpack-dev-server是基于这样的假设,即在一个地方(即"/")有一个公共入口点,而react-router允许无限量的入口点.

我想要webpack-dev-server的好处,特别是热量重新加载功能,这对于提高工作效率很有帮助,但我仍然希望能够加载在react-router中设置的路由.

如何实现它以便它们一起工作？你能以这种方式在webpack-dev-server前运行快速服务器吗？

我是ReactJS和React-Router的新手.我有一个组件通过props接收<Link/>来自react-router的对象.每当用户点击该组件内的"下一个"按钮时,我想<Link/>手动调用对象.

现在,我正在使用refs访问支持实例并手动点击<Link/>生成的'a'标记.

问题:有没有办法手动调用链接(例如this.props.next.go)？

这是我目前的代码:

//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
<Document next={sampleLink} />

//in Document.js
...
var Document = React.createClass({
   _onClickNext: function() {
      var next = this.refs.next.getDOMNode();
      next.querySelectorAll('a').item(0).click(); //this sounds like hack to me
   },
   render: function() {
      return (
         ...
         <div ref="next">{this.props.next} <img src="rightArrow.png" onClick={this._onClickNext}/></div>
         ...
      );
   }
});
...

这是我想要的代码:

//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
<Document …