我试图在我的reactjs应用程序中使用react路由器。而我遇到了这个问题:
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import About from '../Pages/About';
import Home from '../Pages/Home';
import Topics from '../Pages/Topics';
import LinkTest from '../Pages/LinkTest';
class AppRouter extends Component {
render() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/home">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
<Route path="/home" component={LinkTest}/>
</ul>
<hr />
<Route path="/home" component={Home}/>
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
</div>
</Router>
);
}
}
export default AppRouter;
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
class LinkTest extends Component {
render() {
const {match}=this.props;
return (
<div>
<Link to={`${match.url}/Test`}>Link To Test</Link>
</div>
);
}
}
export default LinkTest;
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Test from './Test';
class Home extends Component {
render() {
const {match} = this.props;
console.log(match.url);
return (
<Router>
<div>
<h2>
Hello from Home page
<Link to={`${match.url}/Test`}>Link To Test</Link>
<Route path={`${match.url}/Test`} component={Test}/>
</h2>
</div>
</Router>
);
}
}
export default Home;
然而:
>
当我单击“LinkTest”组件内的链接(前面已经呈现)时,浏览器上的url显示为“http://localhost:3000/home/test”,但没有任何变化。
当我单击“home”组件内的链接时(它与使用相同链接的“linktest”同时呈现),它在浏览器上显示了相同的url:“http://localhost:3000/home/test”,只是这次呈现的是“test”组件。
我希望这足够清楚。
您可以通过以下方式完成:
<Route exact path='/a' component={A} />
<Route path='/b' component={B} />
// Following should be router inside Component B
<Route exact path='/b/abc' component={OtherComponent}
如果你想的话,我准备了几个react-router 4示例。这些都在这里主持。https://github.com/sandipnirmal/react-router-示例
我正在尝试使用react router(版本^1.0.3)做一个简单的重定向到另一个视图的操作,我只是觉得有些累。 我只需要将用法发送到“/login”,就这样。 我能做什么? 控制台中的错误: 未捕获的引用错误:未定义PropType 用我的路线归档
在标记为副本之前,请仔细阅读此内容,我向您保证,我已经阅读并尝试了每个人在stackoverflow和github上提出的关于此问题的所有建议。 我在我的应用程序中有一条路线,如下所示; route rendering呈现打开用户角色的组件,并基于该角色惰性加载正确的Routes组件,Routes组件呈现主页的开关。简化后,如下所示。 然后是路由组件 因此,问题是每当用户从/导航到/秒等...应用
react&React-Router的新功能。我正在使用react-router-4 我有以下组件-login-home-header-sidebar-content 登录组件没有标题或侧栏。 这就是我的路由 应用程序JS 然后在我的Home组件中,我有侧边栏和内容。 home.js呈现方法 侧边栏组件有一个链接,该链接具有“to”值“/home/dashboard”。 不幸的是,这并不奏效。单击
Navigating Programmatically
我正在学习React,在遵循几个教程的同时,我想回去学习如何使其成为D.R.Y,因此给出了以下app.js: app.js 我注意到,路线也被复制到我用来声明侧栏标题的路径中: 侧边ata.js: 考虑到代码被复制,我一直在尝试映射路由组件声明中的组件: 尝试1: 但我得到一个错误,并注意到调用组件时它不起作用,在VSC中,我的组件带来了: 它们变灰了。 尝试2: 我想也许我可以在中通过引入组件来