标签: react-router-v4

我有以下代码用于路由器设置:

import React from 'react'; 
import { Router, Route, browserHistory } from 'react-router'; 
import App from './App'; 

export default () => ( 
  <Router history={browserHistory}> 
    <Route name="demo" path="/mydemo" component={App} /> 
  </Router>
);

但是,我收到以下错误:

Warning: Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`. in Router (at Router.js:12)    
Uncaught TypeError: Cannot read property 'location' of undefined at new Router (Router.js:43)

我正在编写一个带导航栏和5条路线的小应用程序react-router-dom 4.1.1.当我单击导航栏中的链接时,Firefox地址栏中的URL会更新,但显示的页面不会更改.但是,如果我在地址栏中输入子页面的地址,则会显示正确的页面.

app.js:

render(
    <Provider store={store}>
        <HashRouter>
            <MainContainer />
        </HashRouter>
    </Provider>,
    document.querySelector('.app')
);

Main.js:

render() {
    return (
        <div className="main">
            <Message message= {this.props.message} />
            <NavigationBar />
            <Switch>
                <Route exact path="/" component={HomePage}></Route>
                <Route path="/classify" component={ClassifyPage}></Route>
                <Route path="/admin" component={AdminPage}></Route>
                <Route path="/users" component={UsersPage}></Route>
                <Route path="/help" component={HelpPage}></Route>
            </Switch>
        </div>
    );
}

我试图让路由器v4从一个动作导航,store而不是明确地将historyprop 传递给需要在某些逻辑运行后导航的每个存储操作.

我正在寻找这样的工作:

import { NavigationStore } from 'navigation-store';

class ContactStore {
  @action contactForm(name, message){
    // Some logic runs here

    // Then navigate back or success

    // Go back
    NavigationStore.goBack();

    // Or Navigate to Route
    NavigationStore.push('/success'); 
  }
}

当然NavigationStore不存在(我不知道从React Router中放入什么来使它工作),但我想导入一个mobx导航存储,我可以用来导航到应用程序中的任何地方(组件或商店)与api相同react-router

怎么做？

更新:

RR4没有为我们提供从商店的行为导航的方法.我试图导航就像上面用RR4.我只需要知道navigation-store应该包含什么,以便我可以:

1. import { NavigationStore } from 'navigation-store'; 任何地方(组件/商店),也可以是历史记录,能够从任何地方导航.
2. NavigationStore.RR4Method(RR4MethodParam?);哪里RR4Method有可用的RR4导航选项,如push,goBack等.(这就是导航应该如何发生)

更新2:

所以url现在更新,NavigationStore.push('/success');但没有网页刷新发生.

这是 navigation-store.js

import { observable, action } from 'mobx'
import autobind …

我有一个问题,以防止未经授权的用户访问授权的路由/组件 - 例如登录用户仪表板

我有以下代码:

import React from 'react'
//other imports
import {withRouter} from 'react-router'

class User extends React.Component {
  constructor(props) {
    super(props)
    console.log('props', props)
    let user = JSON.parse(localStorage.getItem('userDetails'))
    if(!user || !user.user || props.match.params.steamId !== user.user.steamId) {
      props.history.push('/')
    } else {
      this.props.updateUserState(user)
      this.props.getUser(user.user.steamId)
    }
  }

  //render function
}

//mapStateToProps and mapDispatchToProps

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(User))

路由器:

render() {
    return (
      <Router>
        <div>
          <Route exact path="/" component={Main}/>
          <Route path="/user/:steamId" component={User}/>
          <Route path="/completelogin" component={CompleteLogin}/>
        </div>
      </Router>
    )
  }

我尝试记录以检查是否输入了条件,但是我从渲染函数中得到一个错误,说它无法读取null的属性.

有没有办法解决我的问题,也有更好的方法来满足我的要求？只有授权用户才能严格访问特定组件

我是React的新手，使用react@16.0.0和react-router-dom@4.2.2。

我在每个页面上都显示一个页脚。我想在首页以外的所有页面上显示标题，但是我不知道从哪里开始。

我当前的app.jsx如下所示：

export default class App extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Router>
                <div>
                    <Route exact path="/" component={HomePage} />
                    <Route exact path="/download" component={DownloadPage} />
                    <Footer />
                </div>
            </Router>
        );
    }

}

我喜欢将我的app入口点用作全局州商店.将信息传递给儿童作为道具.

使用react-router 4,如何将prop数据发送到渲染的组件.以类似的方式:

<Route Path=“/someplace” component={someComponent} extra-prop-data={dataPassedToSomeComponent} />

我已经看到了旧版本的react-router的一些janky变通办法,似乎已被弃用.

在v4中执行此操作的正确方法是什么？

我想从这个React Router获取id值：

<BrowserRouter basename="/api">
    <Switch>
        <Route path="/pm" exact component={PaymentMethod}/>
        <Route path="/pw" exact component={PaymentWeb}/>
        <Route path="/rg" exact component={Registrasi}/>
        <Route path="/bonus/:id" exact component={BonusScreen}/>
        <Route path="/hb" exact component={HistoryBonus}/>
    </Switch>
</BrowserRouter>

在我BonusScreen我试图通过使用以下命令打印值：

const userId = this.props.match.id;
console.log(this.userId);

从浏览器，我尝试像这样访问URL：

bonus/NGO628567652201

但是它总是回来了undefined。
我怎样才能解决这个问题 ？

在导航到其他路线之前，是否可以对组件应用逻辑？

例如，我的组件看起来像这样：

  class Example extends React.Component {

    //Handles logic for when user leaves page
    handlePageExit = () => {
        console.log("Leaving page...");
    }

    //Set onBeforeUnload event listener so handlePageExit function is called when user closes or refreshes page
    componentDidMount = () => {
        window.addEventListener("onbeforeunload", this.handlePageExit);
    }

    //This hook is called when page exits or is refreshed 
    //It will remove event listener when 
    //However, it wont be called when user changes to a new route
    componentWillMount = () => {
        window.removeEventListener("onbeforeunload", this.handlePageExit) …

我得到一个像

{Path:xxx, 
Component:"./xxx/ComPXX"}

从我的API并基于此创建我的应用程序的路由。目前，我正在使用React-Loadable（5.5.0）和React-Router（4.4.0-betax，以避免在严格模式下发出警告）。在这里查看工作示例。

自从React 16.6引入React.lazy以来，我正在尝试迁移解决方案，但是我遇到了错误和困难，但是我尝试这样做。您可以在此处查看已迁移（失败）的代码。

知道为什么这不起作用吗？可能是因为React.Lazy不接受变量吗？

我在每条路径上都显示组件有问题，因为React Router 4没有对该路由使用确切的路径（或因此出现）。

<Route path="/" exact component={Explore} />
<Route path="/about" component={About} />

// The one making problems
<Route
    path="/:username"
    exact={true}
    render={props => <Profile {...props} />}
/>

因此，当我转到http://example.com/about时，我的Profile组件仍在呈现中。我猜问题出在路由中，因为它期望参数，:username并且在/（root）之后就出现了。难道我做错了什么？我可以为添加一条其他路线/:username，例如/profile/:username，但如果可能的话，我希望保持原样。