标签: react-router

我尝试作出反应,路由器(V4)和我有开始关闭导航到具有的一个问题Link的是active.如果我点击任何Link标签,那么活动的东西就会开始工作.但是,我希望Home Link能够在应用程序启动时立即激活,因为这是在/路径上加载的组件.有没有办法做到这一点？

这是我目前的代码:

const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <Link activeClassName='is-active' to='/'>Home</Link> {/* I want this to start off as active */}
        <Link activeClassName='is-active' to='/about'>About</Link>
      </Nav>

      <Match pattern='/' exactly component={Home} />
      <Match pattern='/about' exactly component={About} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
)

除了能够在NavLink上设置"activeClassName"和"activeStyle"之外,在您的站点上创建指向非导航元素上的其他路径(即,不是页眉或页脚中的主导航)的链接时,是否有任何理由使用NavLink over Link那些不需要活跃的州/班级？

在组件安装之前进行授权检查的最佳做法是什么？

我使用react-router 1.x

这是我的路线

React.render((
  <Router history={History.createHistory()}>
    <Route path="/" component={Dashboard}></Route>
    <Route path="/login" component={LoginForm}></Route>
  </Router>
), document.body);

这是我的仪表板组件:

var Dashboard = React.createClass({
  componentWillMount: function () {
    // I want to check authorization here
    // If the user is not authorized they should be redirected to the login page.
    // What is the right way to perform this check?
  },

  render: function () {
    return (
      <h1>Welcome</h1>
    );
  }
});

这是常见的目的,指向不发布页面的不匹配请求.

使用react-router v4制作它看起来像以前的版本,我希望这个示例在下面工作.链接工作正常,但我希望NotFound组件只调用未知的url请求; 但它总是在那里.

import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'


class Layout extends Component {
  render() {
    return (
    <Router>
      <div className="App">
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/user">User</Link></li>
        </ul>
        <Route exact path="/" component={Home}/>
        <Route path="/user" component={User}/>
        <Route path="*" component={Notfound}/>
      </div>
  </Router>
    );
  }
}

它自path="*"代表所有请求和未发现的组件总是在那里,但我怎么能说隐藏这个组件的有效网址路径？

我有一组非常简单的反应组件:

• container挂钩到redux并处理动作,存储订阅等
• list 它显示我的项目列表
• new 这是一个向列表中添加新项目的表单

我有一些react-router路由如下:

<Route name='products' path='products' handler={ProductsContainer}>
  <Route name='productNew' path='new' handler={ProductNew} />
  <DefaultRoute handler={ProductsList} />
</Route>

所以显示list或form显示,但不是两者.

我想做的是在成功添加新项目后让应用程序重新路由回列表.

到目前为止,我的解决方案是.then()在异步之后dispatch:

dispatch(actions.addProduct(product)
  .then(this.transitionTo('products'))
)

这是正确的方法吗？或者我应该以某种方式触发另一个动作来触发路线改变？

好吧,我厌倦了尝试.
该onEnter方法不起作用.知道为什么会这样吗？

// Authentication "before" filter
function requireAuth(nextState, replace){
  console.log("called"); // => Is not triggered at all 
  if (!isLoggedIn()) {
    replace({
      pathname: '/front'
    })
  }
}

// Render the app
render(
  <Provider store={store}>
      <Router history={history}>
        <App>
          <Switch>
            <Route path="/front" component={Front} />
            <Route path="/home" component={Home} onEnter={requireAuth} />
            <Route exact path="/" component={Home} onEnter={requireAuth} />
            <Route path="*" component={NoMatch} />
          </Switch>
        </App>
      </Router>
  </Provider>,
  document.getElementById("lf-app")

编辑:

我打电话时执行该方法onEnter={requireAuth()},但显然这不是目的,我也不会得到所需的参数.

我正在将反应路由器添加到现有项目中.

目前,模型被传递到根组件,该根组件包含用于子导航的导航组件和主组件.

我发现反应路由器的例子只有一个子组件,多个子组件改变的最佳方法是什么,而不重复两者中的布局代码？

据我所知,<Route path="/" component={App} />将提供App与路由相关的道具location和params.如果我的App组件有许多嵌套的子组件,如何让子组件无需访问这些道具:

• 从App传递道具
• 使用窗口对象
• 为嵌套的子组件创建路由

我以为this.context.router会有一些与路线相关的信息,但this.context.router似乎只有一些功能来操纵路线.

我有时会看到人们在withRouter导出它们时将它们包装起来:

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

class Foo extends React.Component {
  // ...
}

export default withRouter(Foo);

这是什么,我什么时候应该使用它？

我是Next.js 的新手，我想知道如何从起始页 ( / )重定向到/hello-nextjs例如。一旦用户加载页面，然后确定路径 === /重定向到/hello-nextjs

在react-router 中，我们执行以下操作：

<Switch>
  <Route path="/hello-nextjs" exact component={HelloNextjs} />
  <Redirect to="/hello-nextjs" /> // or <Route path="/" exact render={() => <Redirect to="/hello-nextjs" />} />
</Switch>