标签: react-router-v4

假设我有以下两条路线:

    ...
    <Route exact path="/:param1?/" component={Home}/>
    <Route path="/news" component={News}/>
    ...

现在,当我尝试命中路由时/news,触发Home了参数的根路由param1...

我假设解决方案是在param1之前设置一个问号,/?param1这样它就可以从路由中保存,但我无法弄清楚如何在react-router v4中执行此操作

我正试着用React Router v4渲染多个布局.

例如,我想要具有以下路径的页面具有布局1:

• 确切的路径="/"
• PATH = "/博客"
• 路径="/大约"
• 路径="/项目"

以及具有布局2的以下路径:

• PATH ="/博客/:ID
• PATH ="/项目/:ID

有效地回答了这里的问题,但对于第4版:为反应路由器组件使用多个布局

我正在使用反应路由器4,我无法使用params从URL访问id.我已经按照反应路由器4文档但是当我在console.log match.params.id时返回Cannot read property 'params' of undefined.URL包含id,所以我迷路了.你可以在中找到console.logPath: Container

我究竟做错了什么？

路径: App

const App = appProps => (
  <Router>
    <div className="bgColor">
      <NavBar {...appProps} />
      <Grid className="main-page-container">
        <Switch>
          <Admin exact path="/admin/candidate_profile/:id" component={AdminCandidateProfileContainer} {...appProps} />
        </Switch>
      </Grid>
    </div>
</Router>
);

App.propTypes = {
  loggingIn: PropTypes.bool,
  authenticatedCandidate: PropTypes.bool,
  authenticatedAdmin: PropTypes.bool
};


export default createContainer(() => {
  const loggingIn = Meteor.loggingIn();
  return {
    loggingIn,
    authenticatedCandidate: !loggingIn && !!Meteor.userId() && !!Roles.userIsInRole(Meteor.userId(), 'Candidate'),
    authenticatedAdmin: !loggingIn && !!Meteor.userId() && !!Roles.userIsInRole(Meteor.userId(), 'Admin')
  };
}, App); …

我喜欢v4但是在4.1.2中这使我在使用浏览器路由器时绊倒了:

使用Route组件中的组件,我传入了这些道具:{computedMatch, location, path}尽管文档告诉我期望{match, location, history}使用哈希路由器获得哪些内容.

为了获得传递的历史记录,我必须使用withRouter感觉非常笨重的包装器,因为相关组件是Route组件的组件prop.

文档听起来对我不错.这是一个错误吗？

当从一个页面导航到另一个页面时,我希望用户自动滚动到顶部,即scrollTo(0, 0).

根据react-router 滚动恢复的文档,推荐的方法是设置一个组件ScrollToTop并将您的路由包装在其中.

虽然这很好用,并且用户可以滚动到嵌套在ScrollToTop组件中的任何路径的顶部,但如果组件放在Switch组件中,Switch则不再像Switch那样起作用; 意味着它将渲染它匹配的所有路由而不是第一个路由.

或者,放置它的ScrollToTop外部Switch,它不再滚动用户到顶部.

版: react-router-v4

我的react应用程序有3个入口点，路径重叠，并且很难维护。基本上，其中两个应用只是停留在旧站点上的几个地方，直到主应用具有足以完全替换主站点的功能为止。

我正在使用React Router 4，并且所有路由都包含一个route.tsx文件。但是我想按功能对路由进行分组，然后让每个应用程序的路由组件都能满足需要。

目前，我的路线如下所示：

const MainAppRoutes: React.SFC = (): JSX.Element =>
{
    return (
        <Switch>
            <Route exact path='/' component={HomePage} />
            <Route path='/customers' component={CustomersDisplayPage} />
            <Route path='/customers/:id' component={CustomersDisplayPage} />
            <Route path='/cars' component={CarDisplayPage} />
            <Route path='/cars/:id' component={CarDisplayPage} />
        </Switch>
    );
};

但我希望它看起来像这样：

const MainAppRoutes: React.SFC = (): JSX.Element =>
{
    return (
        <Switch>
            <Route exact path='/' component={HomePage} />
            <CustomerAppRoutes />
            <CarAppRoutes />
        </Switch>
    );

const CustomerAppRoutes: React.SFC = (): JSX.Element =>
{
    return (
        <Switch>
            <Route path='/customers' component={CustomersDisplayPage} />
            <Route path='/customers/:id' …

我正在尝试为反应路由器4匹配正则表达式模式，但不幸的this.props.match.params.id是，它无法正确解析路径，并显示为未定义。

我希望能够访问的路径示例：

1. /全球定位系统
2. / gps /空气
3. / gps / a0b6dc45-11a1-42c5-afdb-a62822d109dc
4. / gps / air / a0b6dc45-11a1-42c5-afdb-a62822d109dc

我的组件：

import React from "react";
import PropTypes from "prop-types";
import { withRouter, } from "react-router";
import { Switch, Route } from "react-router-dom";

class Foo extends React.Component {
    render(){
        console.log(this.props.match);
        return <div>Match: {this.props.match.params.id}</div>
    }
} 

const industryRegex = "(air|motor|ship)";
const guidRegex = "([0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12})?"; // Note the questionmark ? at the end

const pathId =            `/gps/:id${guidRegex}`;
const pathIndustry =      `/gps/:industryType${industryRegex}`;
const pathIndustryAndId = `/gps/:industryType${industryRegex}/:id${guidRegex}`; …

我有以下代码：

<View>
  <Header />
  <List />
</View>

如果用户单击列表项中的编辑按钮，react-router则将页面从 更改/list为/list/{itemId}。这是一个新页面。用户填写一些信息并单击保存后，react-router更改回/list. 现在整个/list页面已重新渲染！

有没有办法缓存页面，以便react检测更改并仅重新渲染它们而不是再次渲染整个页面？

还应该可以直接渲染页面（而不是通过/list-> /list/{itemId}），所以modal我认为没有解决方案。

我正在使用react-router-redux v5.0.0-alpha.9，所以该解决方案应该与其兼容。它还应该与react-native和兼容react-dom。

来自React Router的文档:

a的所有孩子<Switch>应该是<Route>或<Redirect>元素.只会呈现与当前位置匹配的第一个子项.

尽管如此,<Switch>允许使用嵌套语句.我用这个模式来分解大量的<Routes>:

<Switch>
  <Route path="/foo" component={FooRouter} />
  <Route path="/bar" component={BarRouter} />
  <Route path="/baz" component={BazRouter} />
</Switch>

...

const FooRouter = () => (
  <Switch>
    <Route exact path="/foo/:id" component={ViewFoo} />
    <Route exact path="/foo/new" component={NewFoo} />
  </Switch>
)

const BarRouter = () => (
  <Switch>
    <Route exact path="/bar/new" component={NewBar} />
  </Switch>
)

....

好奇是否有更好的方法来分解大量的路由,是否<Switch>应该避免使用嵌套语句？

我是react-router的新手（通常是客户端路由），所以我可能会想到这一切都是错误的。如果是这样的话，请提前抱歉。

基本上只想实现3条简单的规则：

• 如果没有用户，请重定向到“ /登录”
• 否则，如果路由不存在，请重定向到“ /”（根）
• 否则让用户转到请求的路线

我跟踪中的用户this.state.user。我当前的路由器似乎遵循前2条规则，但是只允许经过身份验证的用户查看主页（“ / profile”重定向到“ /”），所以我知道我做错了事，但无法弄清楚。

 <Router>
    {this.state.user ? (
      <Switch>
        <Route path="/" exact component={Home}/>
        <Route path="/profile" exact component={Profile}/>
        <Route render={() => (<Redirect to="/" />)}/>
      </Switch>
    ) : (
      <Switch>
        <Route path="/login" exact component={Login}/>
        <Route render={() => (<Redirect to="/login" />)}/>
      </Switch>
    )}
 </Router>

任何建议表示赞赏。谢谢