新的反应转子语法使用该Link组件在路径上移动.但是如何与它结合materiaul-ui？

就我而言,我使用制表符作为主导航系统,所以理论上我应该有这样的东西:

const TabLink = ({ onClick, href, isActive, label }) => 
  <Tab
    label={label}
    onActive={onClick}
  />



export default class NavBar extends React.Component {
  render () {
    return (
      <Tabs>
        <Link to="/">{params => <TabLink label="Home" {...params}/>}</Link>
        <Link to="/shop">{params => <TabLink label="shop" {...params}/>}</Link>
        <Link to="/gallery">{params => <TabLink label="gallery" {...params}/>}</Link>
      </Tabs>
    )
  }
}

但是当它呈现时,material-ui会抛出一个错误,即孩子Tabs必须是一个Tab组件.有什么办法可以继续？如何管理选项卡的isActive道具？

提前致谢

我想尝试在我的反应应用程序中添加/编辑表单的单独路径,但相同的组件,如下所示:

<Switch>
        <Route exact path="/dashboard" component={Dashboard}></Route>
        <Route exact path="/clients" component={Clients}></Route>
        <Route exact path="/add-client" component={manageClient}></Route>
        <Route exact path="/edit-client" component={manageClient}></Route>        
        <Route component={ NotFound } />        
</Switch>

现在在manageClient组件中,我解析查询参数(我在编辑路径中传入一个带有客户端ID的查询字符串),我根据传递的查询参数有条件地渲染.

问题是,这不会再次重新安装整个组件.假设打开了一个编辑页面,并且用户单击了添加组件,URL就会更改,但该组件不会重新加载,因此会保留在编辑页面上.

有办法处理这个吗？

(react-router-dom版本:4.1.1)

我有工作路线设置,但我有点困惑为什么有<Switch>必要:

index.js

import React from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';

import App from './components/App.jsx';
import FridgePage from './components/FridgePage.jsx';

ReactDOM.render(
    <HashRouter>
        <Switch>
            <Route exact path="/" component={App} />
            <Route path="/fridge" component={FridgePage} />
        </Switch>
    </HashRouter>,
    document.getElementById('root')
)

App.jsx

import Header from './Header.jsx';
import {Link} from 'react-router-dom';

export default class App extends React.Component {
    render() {
        console.log(this.props);
        return (
            <div>
                <h1>Herbnew</h1>
                <Link to="fridge">Fridge</Link>
                {this.props.children}
            </div>
        );
    }
}

FridgePage.jsx

import React from 'react';

export default …

检查完这样的条件后,我有一条路线重定向

<Route exact path="/" render={()=>(
Store.isFirstTime ? <Redirect to="intro" /> : <Home state={Store}/>)}/>

当条件为真但未安装组件时,URL会更改.组件代码的其余部分如下所示.

render() {
    return (
      <div>
        ...
        <Route exact path="/" render={()=>(
          Store.isFirstTime ? <Redirect to="intro" /> : <Home state={Store} />         
        )} />
        <Route path="/intro" render={()=>(<IntroWizard state={Store.userInfo}/>)} />
        <Route path="/home" render={()=>(<Home state={Store}/>)} />
        <Route render={()=>(<h1>404 Not Found</h1>)} />
        <Footer />
      </div>
    );
  }

My App Component包含在BrowserRouter中,就像thi一样

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

当我直接在浏览器中点击url时,就像'localhost:3000/intro'组件成功安装,但是当它通过重定向时,它不会显示组件.我如何解决它？

编辑

所以缺少一个细节,我尝试创建另一个项目来重现问题.我的应用程序组件是来自mobx-react的观察者,它的导出方式如下所示

let App = observer(class App { ... })
export default App

我用一个示例代码创建了这个repo来重现你可以使用它的问题 https://github.com/mdanishs/mobxtest/

因此,当组件被包装到mobx-react观察器中时,重定向不起作用,否则它工作正常

这是我的webpack配置的代码:

const compiler = webpack({
  entry: ['whatwg-fetch', path.resolve(__dirname, 'js', 'app.js')], 
  module: {
    loaders: [
      {
        exclude: /node_modules/, 
        test: /\.js$/, 
        loader: 'babel',
      },
    ],
  },
  output: {filename: 'app.js', path: '/'}, 
});

const app = new WebpackDevServer(compiler, {
  contentBase: '/public/', 
  proxy: {'/graphql': `http://localhost:${GRAPHQL_PORT}`},
  publicPath: '/js/',
  stats: {colors: true}, 
});

app.use('/', express.static(path.resolve(__dirname, 'public')));

工作正常,应用程序运行在localhost:3000/index.html但是当我尝试实现React Router dom v4时.它不起作用.这是代码:

const About = () => <div> <h1>About</h1> </div>

ReactDOM.render(
   <BrowserRouter>
      <div>
      <Route exact path='/' component={App}/>
      <Route  path='/about' component={About}/>
      </div>
    </BrowserRouter>,
  mountNode
);

这是localhost的结果:3000/ 在localhost:3000 /约.我收到一个错误:无法获取/关于.不是我期待的,为什么这不会呈现？

关于

我正在使用来自react-router v4 jest的组件进行测试<Link>.

我收到一个警告,<Link />需要来自react-router <Router />组件的上下文.

如何在测试中模拟或提供路由器上下文？(基本上我该如何解决此警告？)

Link.test.js

import React from 'react';
import renderer from 'react-test-renderer';
import { Link } from 'react-router-dom';

test('Link matches snapshot', () => {
  const component = renderer.create(
    <Link to="#" />
  );

  let tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

测试运行时的警告:

Warning: Failed context type: The context `router` is marked 
as required in `Link`, but its value is `undefined`.

对于使用什么而言似乎有些混淆:

• <Link to='/some/path'>
• <Redirect to='/some/path'/>
• history.push('/some/path')

我一直在使用React/Router一段时间,不同的帖子/答案说明何时使用这些,有时它们与其他人说的不一致.所以我想我需要澄清一下.

根据我的理解Link和本文档:

为您的应用程序提供声明性,可访问的导航.

根据我的理解Redirect和本文档:

将导航到新位置.新位置将覆盖历史堆栈中的当前位置,如服务器端重定向(HTTP 3xx).

看起来我读过的所有帖子几乎每个人都Redirect用来浏览应用程序,没有人建议Link在这篇文章中使用.

现在history可以做同样的事情Link,Redirect除了我有一个历史堆栈跟踪.

问题1:我什么时候想使用Linkvs Redirect,另一个用例是什么？

问题2:既然history可以使用历史堆栈的额外奖励将用户路由到应用程序中的另一个位置,我应该在路由时始终只使用历史对象吗？

问题3:如果我想在应用程序之外进行路由,那么最好的方法是什么？锚标签,Window.location.href,Redirect,Link,以上都没有？

我正在寻找一种当React-Router v4 +更改位置时修改页面标题的方法。我曾经在Redux中侦听位置更改操作，然后针对某个metaData对象检查该路由。

使用React-Router v4 +时，没有固定的路由列表。实际上，站点周围的各种组件都可以使用Route相同的路径字符串。这意味着我使用的旧方法将不再起作用。

当某些主要路线发生更改时，是否可以通过调用操作来更新页面标题，还是有更好的更好的方法来更新网站的元数据？

我是反应路由器(v4)的新手,我正在按照教程直到这个小问题:

这段代码效果很好

class App extends Component {
render() {
return (
    <Router>
       <div>
           <ul>
              <li><Link to="/link/value1" className="nav-link">Value1</Link></li>
              <li><Link to="/link/value2" className="nav-link">Value2</Link></li>
              <li><Link to="/link/value3" className="nav-link">Value3</Link></li>
         </ul>
         <hr/>
         <Route path="/link/:id" component={Generic}/>
       </div>
    </Router>
);
}
}

我定义了一个到/ link /:id的路由,其中​​包含3个链接.然后我声明我的"通用"组件(作为一个函数):

const Generic = ({ match }) => (
<div className="wrapper">
    <div className="section">
        <div className="container">
            <h3>Menu : {match.params.id}</h3>
        </div>
    </div>
</div>
)

这项工作如预期,没问题.但是现在,我想用ES6类语法声明我的组件,如下所示:

class Generic extends React.Component {
constructor(props) {
    super(props);
}

render() {
    return (
        <div className="wrapper">
            <div className="section">
                <div className="container">
                    <h3>Menu : {this.props.params.id}</h3> …

我正在阅读React路由器中的静态与动态路由,我正在努力识别后者的优势(以及为什么v4选择使用它).我可以看到列出应用程序的所有路由(静态)的优势,以及每个路由映射到的组件,允许您跟踪给定特定URL的内容.但我没有看到动态路线有任何明显的优势.

如果有的话,我只能看到缺点,因为没有明确的方法来查看URL将映射到什么状态,而无需从根应用程序元素开始并按照路径进行操作(尽管我可能会弄错).

动态路由解决了什么情况？为什么它更适合静态路由(可能特别是在React应用程序中)？