标签: react-router-v4

我正在尝试将我的项目从使用v3移植react-router到现在调用的v4 react-router-dom.现在问题出现在我有一个MenuBar组件,它完全独立于路由逻辑(正如你所期望的那样),因为无论当前路径是什么,它都会显示完全相同的链接.现在这与v3完美配合,但现在当我正在使用时NavLink,它具有相同的activeClassName属性,活动路由不会在NavBar上更新,仅在刷新时.这似乎有点愚蠢,所以必须有办法解决这个问题.

export default @inject('ui') @observer class App extends Component {
  render() {
    return (
      <Router>
        <div className={ styles.wrapper }>
          <Sidebar />
          <main className={ `${styles.main} ${!this.props.ui.menuOpen && styles.closed}` }>
            <Route exact path="/" component={ HomePage } />
            <Route path="/signup" component={ SignUpPage } />
            <Route path="/login" component={ LoginPage } />
            <Route path="/about" component={ AboutPage } />
          </main>
          <footer className="site-footer"></footer>
        </div>
      </Router>
    );
  }
}

以上是我的主要App逻辑,你可以看到路由是嵌套的,但路由器本身包裹整个组件.

我应该添加什么才能使它们再次工作？(它们在页面刷新时可以正常工作)

我刚开始使用react-router V4,我想知道如何获取路由器的当前位置

这是我的源代码

import {Meteor} from 'meteor/meteor';
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import createHistory from 'history/createBrowserHistory'
import {Route, BrowserRouter as Router, Switch} from 'react-router-dom'
import {Tracker} from 'meteor/tracker';

import Signup from '../imports/ui/signUp';
import Link from '../imports/ui/link';
import Login from '../imports/ui/login';
import NotFound from '../imports/ui/notFound';

const history = createHistory();
const unauthenticatedPages = ['/', '/signup'];
const authenticatedPages = ['/links'];

const routes = (
    <Router history={history}>
        <Switch>
            <Route exact path="/" component={Login}/>
            <Route exact path="/signup" component={Signup}/>
            <Route path="/links" component={Link}/>
            <Route …

我有这个代码:

<BrowserRouter>
   <Route  path="/(:filter)?" component={App} />
</BrowserRouter>

根据以前的路由器版本,过滤器参数或"根"假设是在App组件的道具上吗？

这是我在我的应用程序上的代码:

const App = ({params}) => {
    return ( // destructure params on props
      <div>
        <AddTodo />
        <VisibleTodoList 
            filter={params.filter || 'all'} // i want to git filter param or assign 'all' on root 
        />
        <Footer />
      </div>
    );
}

我在控制台上记录了this.props.match.params,但它没有？救命？

如果我有这样的事情:

<ConnectedRouter history={history}>
    <App />
</ConnectedRouter>

我的路由配置如下:

export default [{
    path: '/',
    exact: true,
    main: Home
}, 
{
    path: '/:someId',
    exact: true,
    main: Profile
},
{
    path: '*',
    main: NotFound
}];

app只是路由和其他组件的包装,如:

class App extends Component {
render() {
return (
  <div>
    <Header />
    <Switch>
      {routes.map((route, i) => <Route exact key={i} component={route.main} path={route.path}/>)}
    </Switch>
    <AnotherComponent {...this.props} />
  </div>
);
}
}

是否有一种方法让AnotherComponent使用match.params或公开那些？我已经尝试使用withRouter包装组件,并将其添加为Route,没有匹配的路径,如:

<Route component={AnotherComponent} />

当路由是/:someId时它确实渲染了Profile和AnotherComponent,但是AnotherComponent的match.params是空的:/.

这可能吗？谢谢!

我有以下两条路线:/items和/items/buy.

每个路径对应于单个视图中的Tab.两条路线都使用精确的道具进行渲染,但仍然有两个标签在导航时被标记为活动/items/buy.

我已经尝试过使用withRouter,但我注意到要改变/items以/items/sell解决问题,但我不想拥有这条路线.

我知道rrv4匹配我的路线的第一部分/items和其他路线/items/buy,但我认为如果我正在使用它不应该发生exact.有关为什么会发生这种情况的任何线索？

啊,我忘了说我已经在使用Switch了.

谢谢你的帮助!

我需要使用react-router-4实现注册流程.流程包括以下步骤:

1. 创建帐户(电子邮件/通行证)
2. 确认邮件
3. 创建个人资料(个人资料详情,如城市,年龄等,必填字段)

申请要求:

• 如果用户未登录,则应始终将其重定向到Login页面
• 如果用户已登录,但电子邮件未确认,则应始终将其重定向到ConfirmEmail页面(无论他在URL地址栏中输入的是哪个URL,即使在几天后加载应用程序之后)
• 如果用户确认了电子邮件,但尚未创建个人资料,我希望他始终被重定向到CreateProfile页面

因此,如果用户没有完成某个步骤,我希望始终将他重定向到此步骤(即使在重新加载应用程序之后,无论他在浏览器中输入什么URL).

作为一个选项,我想限制用户访问ConfirmEmail页面,如果他已经确认了(或者CreateProfile如果他已经创建了个人资料,则限制访问页面).

如何 使用React路由器4 优雅地实现这个逻辑？我认为这是应用程序的核心/基本功能,因此我正在寻找良好,可扩展的解决方案.

另外我使用的终极版,所以请注意,在某些时候我已经有下列变量在终极版状态:isLoggedIn, isEmailConfirmed,isProfileCreated.

谢谢.

我正在构建一个没有Redux的React项目.

我希望有两个,或者在这种情况下有3个不同的开关

当用户登录时,1st Switch将能够在主页(普通网站)和UserPage(仪表板)之间切换......然后每个都将成为切换器,因此Home将在Home组件之间切换,并且UserPage将在UserPage组件.这甚至可能吗？

                        Main Switcher 
     Home Page (Switch)              Dashboard
Home About Contact, Careers     My Profile, Courses, Classes, Donations...

这就是项目的外观和结构.

我有一个问题react和react-router.当我单击链接时(在我的示例contact中Footer.js),URL会更改,但Location不会显示所需的组件.当我刷新网站时,会显示正确的组件.

App.js:

import React, { Component } from 'react';
import { BrowserRouter as Router, HashRouter, Route, Link } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.css';
import Footer from './Footer.js';
import Navigation from './Navigation.js';
import Background from './Background.js';
import Home from './Home.js';
import Products from './Products.js';
import Industries from './Industries.js';
import Partner from './Partner.js';
import Location from './Location.js';
import MeetUs from './MeetUs.js';
import ScrollUp from './ScrollUp.js';
import Divider from './Divider.js';
import Country from './Country.js'; …

我有一个简单的react hooks应用程序-Todos列表-带有react router v4

在待办事项列表上，单击待办事项时，我需要：

1. 在上下文中调度当前待办事项
2. 重定向到另一条路线（从/ todos到/ todos /：id）

在以前的基于React Class的实现中，我可以使用this.context.history.push重定向到另一条路由。

我如何将React Hooks与React Router v4结合使用来处理（在下面的代码中，请参见函数editRow（）中的注释）？

代码如下：

===== index.js =====

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter} from "react-router-dom"

import App from './App';

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>, document.getElementById('root'));

===== main.js =====

import React from 'react'
import { Switch, Route } from 'react-router-dom'
import TodosList from './todoslist'
import TodosEdit from './todosedit'

const Main = () => (
  <main>
    <Switch>
      <Route exact path="/todos" component={TodosList}/>
      <Route exact path="/todos/:id" …

我制作了一个组件并将其用作...

<TopNav
    loggedIn={global.shared.loggedIn} // false 
    fullName={global.shared.fullName} // ''
    avatar={global.shared.avatarId} // ''
/>

在 TopNav 组件中，我希望能够访问我传入的道具和/props.history或以编程方式导航用户的其他方式而无需刷新..

import React from 'react';
import { RouteComponentProps } from 'react-router-dom';


interface PropsInterfaceNew {
  avatar: string;
  loggedIn: boolean;
  fullName: string;
}

interface PropsInterface
  extends RouteComponentProps<PropsInterfaceNew> {}
//                                    ^ Error

const TopNav: React.FC<PropsInterface> = (props: PropsInterface) => {
...
 const firstName = props.fullName.split(' ')[0]; // I need props.fullName & others
  const search = (event: React.FormEvent) => {
    event.preventDefault();
    props.history.push('/my/profile'); // I need props.history
  };

错误是 …