相关疑难解决方法(0)

将自定义道具传递给react-router v4中的路由器组件

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

{match: Object, location: Object, history: Object, staticContext: undefined}
Run Code Online (Sandbox Code Playgroud)

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

父组件(我试图在我的所有子组件中将"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> …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-router react-router-v4

16
推荐指数
1
解决办法
1万
查看次数

使用 Link 在 React-Router 中上一级

令人惊讶的是,在 Google 和 StackOverflow 中很难找到它,我在这里问的是使用<Link>.

例如,我降落在这条路径上:/subject/add. 然后我想/subject/subject/add.

这有效:

<Link to={props.match.url.substring(0, props.match.url.lastIndexOf('/'))}>
Go up one level </Link>
Run Code Online (Sandbox Code Playgroud)

这是最好的方法吗?(注意:history.goBack如果用户通过嵌套路由作为着陆页到达,则可能会将用户从网站中踢出。

reactjs react-router

6
推荐指数
1
解决办法
1362
查看次数