标签: react-router-v4

我正在尝试使用react-router 4进行服务器端渲染.我遵循此处提供的示例https://reacttraining.com/react-router/web/guides/server-rendering/putting-it-all-together

根据服务器上的示例我们应该使用StaticRouter.当我按照示例导入时,我看到StaticRouter是未定义的

import {StaticRouter} from 'react-router';

在网上做了一些研究之后,我发现我可以使用react-router-dom.现在我的import语句看起来像这样.

import {StaticRouter} from 'react-router-dom';

但是,当我运行代码时,我将Invariant Violation: Browser history needs a DOM进入浏览器.

我的server.js文件代码

....
app.get( '*', ( req, res ) => {
  const html = fs.readFileSync(path.resolve(__dirname, '../index.html')).toString();
  const context = {};
  const markup = ReactDOMServer.renderToString(
    <StaticRouter location={req.url} context={context} >
      <App/>
    </StaticRouter>
  );

  if (context.url) {
    res.writeHead(302, {
      Location: context.url
    })
    res.end();
  } else {
      res.send(html.replace('$react', markup));
  }
} );
....

和我的client/index.js代码

....
ReactDOM.render((
  <BrowserRouter>
    <App /> …

有没有办法在React Router v4中嵌套路由？

这有效:

  <Router basename='/app'>
    <main>
      <Route path='/' component={AppBar} />
      <Route path='/customers' component={Customers} />
    </main>
  </Router>

这不是:

  <Router basename='/app'>
    <Route path='/' component={AppBar}>
      <Route path='/customers' component={Customers} />
    </Route>
  </Router>

客户组件:

import React, { Component, PropTypes } from 'react'
import styled from 'styled-components'

export default class Customers extends Component {
  render () {
    return (
      <Container>
        <h1>Customers</h1>
      </Container>
    )
  }
}

const Container = styled.section`
  height: 100%;
  padding: 15px;
  overflow: auto;
`

我已经使用react-router版本4 设置了React.当我直接在浏览器上输入URL时,路由工作正常,但是当我点击链接时,URL在浏览器上发生了变化(例如http:// localhost:8080/categories),但是内容不会更新(但如果我刷新,它会更新).

以下是我的设置:

该Routes.js设置如下:

import { Switch, Route } from 'react-router-dom';
import React from 'react';

// Components
import Categories from './containers/videos/Categories';
import Videos from './containers/videos/Videos';
import Home from './components/Home';

const routes = () => (
  <Switch>
    <Route exact path="/" component={Home}/>
    <Route path="/videos" component={Videos}/>
    <Route path="/categories" component={Categories}/>
  </Switch>
);

export default routes;

我在Nav.js中使用的链接如下:

<Link to="/videos">Videos</Link>
<Link to="/categories">Categories</Link>

该App.js如下:

import React from 'react';
import './app.scss';
import Routes from './../routes';
import Nav …

使用React router v4开发React应用程序.一切顺利,直到我在我的应用程序中介绍了Redux.从那以后点击链接更改路由,浏览器URL会发生变化,但是路径对应的组件没有加载.如果我注释掉Redux代码,它会很好用.可能是什么导致了这个？这是我的路由代码:

import React, { Component } from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import LeftSubDefault from './../components/left-sub-default.component';
import LeftSubOne from './../components/left-sub-one.component';
import LeftSubTwo from './../components/left-sub-two.component';
import { withRouter } from 'react-router-dom';
import { connect } from "react-redux";
import { goToLeftDefault, goToLeftOne, goToLeftTwo } from "./../actions/leftRouteActions.js";

class LeftComponent extends Component {
  render() {
    return (
      <div className="col-xs-6">
          <p>
            Current sub route: {this.props.currentRoute}
          </p>
          <ul>
            <li onClick={this.props.goToDefault}><Link to={'/'}>Go To Default</Link></li>
            <li onClick={this.props.goToSub1}><Link to={'/left-sub1'}>Go To One</Link></li>
            <li onClick={this.props.goToSub2}><Link …

我有一个带有链接的"主页"组件,当您单击链接时,产品组件将随产品一起加载.我还有另一个始终可见的组件,显示"最近访问过的产品"的链接.

这些链接在产品页面上不起作用.单击链接时会更新URL,并且会进行渲染,但产品组件不会使用新产品进行更新.

请参阅此示例: Codesandbox示例

以下是index.js中的路由:

<BrowserRouter>
  <div>
    <Route
      exact
      path="/"
      render={props => <Home products={this.state.products} />}
    />

    <Route path="/products/:product" render={props => <Product {...props} />} />

    <Route path="/" render={() => <ProductHistory />} />

    <Link to="/">to Home</Link>
  </div>
</BrowserRouter>;

ProductHistory中的链接如下所示:

<Link to={`/products/${product.product_id}`}> {product.name}</Link>

所以他们匹配Route path="/products/:product".

当我在产品页面上并尝试关注ProductHistory链接时,会更新URL并进行渲染,但组件数据不会更改.在Codesandbox示例中,您可以取消注释Product components render function中的警报,以便在您按照链接时看到它呈现,但没有任何反应.

我不知道问题是什么......你能解释一下问题并找到解决办法吗？那太好了!

我发现没有使用完成react-router-redux路由的唯一工作方法action creator async action是将historyprop从组件传递给action creator并执行:

history.push('routename');

由于BrowserRouter忽略了传递给它的历史道具,因此我们不能将自定义历史对象与browserhistory一起使用.

解决这个问题的最佳方法是什么？

我正在阅读react-router-redux示例,我很困惑,有什么区别:

import { Redirect } from 'react-router-dom'

...

<Redirect to='/login' /> 

和

import { push } from 'react-router-redux'

...

push('/login')

我正在使用React的最新版本(16.6)和react-router(4.3.1)并尝试使用代码分割React.Suspense.

虽然我的路由工作正常并且代码确实分裂成了几个动态加载的bundle,但我收到的警告是不返回一个函数,而是一个对象Route.我的代码:

import React, { lazy, Suspense } from 'react';
import { Switch, Route, withRouter } from 'react-router-dom';

import Loading from 'common/Loading';

const Prime = lazy(() => import('modules/Prime'));
const Demo = lazy(() => import('modules/Demo'));

const App = () => (
  <Suspense fallback={<Loading>Loading...</Loading>}>
    <Switch>
      <Route path="/" component={Prime} exact />
      <Route path="/demo" component={Demo} />
    </Switch>
  </Suspense>
);

export default withRouter(App);

控制台警告如下: Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`. …

如何创建react-router v4 breadcrumbs？我尝试通过问题单在react-router V4网站上提出这个问题.他们只是说看到递归路径的例子.我真的想用语义 - 反应来创建它

更新:

反应导航网络支持已完成.请遵循:https: //reactnavigation.org/docs/en/web-support.html

原文:

我尝试在react-native和web之间共享我的代码.当我尝试react-native-web时,它运作良好.但是只有一个问题,如何从网址访问特定的屏幕？我读了react-navigation的文档,没有任何相关内容.和react-router-native可以捕获web url,但它有导航器喜欢StackNavigator/DrawerNavigator.那个想法？