标签: react-router-v4

我怎样才能https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-2/react-router.min.js使用https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.1/ReactRouter.min.js？

使用3.x以下的示例.

HTML

<script src="https://unpkg.com/react@15.4.2/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.1/ReactRouter.min.js"></script>

JS

let { Router, IndexRoute, Redirect, Route, Link, browserHistory } = ReactRouter;

history.replaceState(0,0,'/');

const Main = () =>
  <Router history={browserHistory}>

    <Route path='/' component={App}>
      <IndexRoute component={Home}/>
      <Route path='map' component={Map}/>
      <Route path='settings' component={Settings}/>
            <Redirect from='foo' to='/' />
      <Route path='*' component={NotFound}/>
    </Route>

  </Router>

const App = props => 
  <div>
    <Navigation>
      <Link to='/map'>Map</Link>
      <Link to='/settings'>Settings</Link>
      <Link to='/foo'>Foo</Link>
    </Navigation>

    {props.children}

  </div>

const Navigation = props => <nav {...props} />
const Home = …

首先,我对withRouter HoC 非常熟悉,但是,在这种情况下,它没有帮助,因为我不想访问history组件中的对象.

我正在尝试实现一种机制,如果我从API端点收回401,则会将用户重定向到登录页面.为了发出http请求,我正在使用axios.我需要覆盖大约60个端点,这些端点在我的应用程序中用于十几个组件.

我想为axios实例对象创建一个装饰器函数,它:

1. makes the request
2. if fail && error_code = 401, update user route to `/login`
3. if success, return promise

我对上面的问题是更新用户的路线.以前,react-router-v3我可以browserHistory直接从react-router包中导入对象,这是不可能的.

所以,我的问题是,如何在不通过调用堆栈的情况下访问React组件之外的历史对象？

更新:

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

原文:

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

我正在使用Enzyme,我们实际上可以使用文档中给出的示例组件作为我的问题的基础.

假设这个<Foo />组件使用了<Link>ReactRouter中的一个组件,因此我们需要将它包装在一个<MemoryRouter>for测试中.

这就是问题所在.

it('puts the lotion in the basket', () => {
  const wrapper = mount(
    <MemoryRouter>
      <Foo />
    </MemoryRouter>
  )

  wrapper.state('name') // this returns null! We are accessing the MemoryRouter's state, which isn't what we want!
  wrapper.find(Foo).state('name') // this breaks! state() can only be called on the root!
})

因此,在使用时不确定如何访问本地组件状态<MemoryRouter>.

也许我正在进行无知的测试？试图在测试中获取/设置组件状态不良做法？我无法想象,因为Enzyme有获取/设置组件状态的方法.

只是不确定应该如何访问包含在其中的组件的内部<MemoryRouter>.

任何帮助将不胜感激!

我试图在YouTube和官方文档上学习一些React基础知识,我只在两个视频中遇到了多个不同的路由器.可悲的是,导师根本没有解释任何事情,我比以前更加困惑.

博士:我真的没有区分浏览器路由器,"普通"路由器和索引路由器.谢谢大家帮助我.

你好，如果没有身份验证，我尝试保护路由，但它不起作用

警告：您不应在同一路由中使用 Route 组件和 Route 渲染；路由渲染将被忽略

应用程序.js

  import React, { Fragment, useEffect } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import NavBar from './component/Layout/NavBar';
import Landing from './component/Layout/Landing';
import Login from '../src/component/Auth/Login';
import Register from '../src/component/Auth/Register';
import Dashboard from './component/dashboard/Dashboard';
import Alert from './component/Auth/Alert';
import PrivateRoute from './component/routing/PrivateRoute';

import './App.css';

// Redux
import { Provider } from 'react-redux';
import store from './store';
import setAuthToken from './utils/token';

import { loadUser } from './action/auth';


if (localStorage.token) { …

用户登录后重定向到我的应用程序（Java 上的服务器），他们有 url，看起来像这样 http://10.8.0.29:8083/html/?locale=RU&token=1c5c71f2-dcda-4a51-8cf6-f8f6ff1031d0&returnTo=http ://10.8.0.23:8080/

（带有一些参数，html - 是源所在的文件夹）。在我的应用程序上导航时，我需要保留这些参数。到目前为止，我没有找到任何简单的解决方案，除了这个如何在保留初始查询参数的同时使用 react-router 重定向？老问题，所以我再次提出这个问题，希望如此。提前致谢。

我正在使用React Router创建一个多页面应用程序.我的主要组件是<App/>,它将所有路由转换为子组件.我正试图通过路线传递道具,并且基于我所做的一些研究,子组件最常用的方式是传递到传递的道具是通过this.props.route它们继承的对象.但是,这个对象对我来说是不确定的.在我render()的子组件中的函数中,我将console.log(this.props)返回一个看起来像这样的对象

{match: Object, location: Object, history: Object, staticContext: undefined}

看起来不像我期望的道具.这是我的详细代码.

父组件(我试图在我的所有子组件中将"hi"这个词传递给名为"test"的道具):

import { BrowserRouter as Router, HashRouter, Route, Switch } from 'react-router-dom';
import Link from 'react-router';
import React from 'react';

import Home from './Home.jsx';
import Nav from './Nav.jsx';
import Progress from './Progress.jsx';
import Test from './Test.jsx';



export default class App extends React.Component {

  constructor() {
    super();

    this._fetchPuzzle = this._fetchPuzzle.bind(this);
  }

  render() {
    return (
      <Router>
        <div>
          <Nav />
          <Switch> …

我在react-router-dom中有这个路径:

 <BrowserRouter>
  <div>
  <Route exact path='/(index.html)?' component={Home}/> {/* app = home */}
  <Route  path='/register' component={Registration}/>
  </div>
</BrowserRouter>

一切都工作正常,现在我的组件中的任何地方我想通过onClick更改路径,这样的代码:

<button onClick={() => history.push('/the/path') }> change path </button>

我怎样才能做到这一点？

如何进行条件路由,当且仅当某些条件满足时才会发生路由.例如,当且仅当用户输入正确的凭证时,登录才能成功,用户应该能够看到欢迎页面.

如果我们直接点击一些像"localhost:8080/welcome"这样不应该导航到欢迎页面的URL,只有在登录后才能看到欢迎页面.我怎么能做到这一点,任何人都可以帮助我..谢谢你.

App.js

import React, { Component } from 'react';
import Header from './Header';

class App extends Component{
  render(){
   return(
     <div>
       <Header />
     </div>
   );
  }
}
export default App;

Header.js

import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import Login from './Login';
import SignUp from './SignUp';

class Header extends Component{
render(){
  return(
    <div>
    <nav class="navbar navbar-default">
     <div class="container-fluid">
     <ul class="nav navbar-nav">
      <li><Link to={Login}>Login</Link></li>
      <li><Link to={Login}>SignUp</Link></li>
    </ul>
    </div>
    </nav>

    </div>
   );
 } 
}

export default Header;

AllRoutes.js …