React路由器链接似乎不适用于我的应用程序。它似乎我是失踪一样基本不工作。我的链接组件更新的URL是/products/singleproduct，但我的页面只是打破....有人能告诉我如何解决这个问题吗？
应用程序js
import React from 'react';
import Header from './Header';
import Body from './Body';
import Main from './Main';
require('../../scss/style.scss');
const App = () => (
<div>
<Header />
<Main />
</div>
);
export default App;主文件.js
import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import ServicePage from './ServicePage';
import ProductPage from './ProductPage';
import SingleProductPage from './SingleProductPage';
import Body from './Body';
export default class Main extends Component {
render() {
return (
<main>
<Switch>
<Route exact path="/" component={Body} />
<Route path='/services' component={ServicePage} />
<Route path='/products' component={ProductPage}>
<Route path="/products/singleproduct" component={SingleProductPage} />
</Route>
</Switch>
</main>
)
}
}产品页面.js
import React, { Component } from 'react';
import { Link } from 'react-router';
import { withStyles } from 'material-ui/styles';
import Card, { CardActions, CardContent, CardMedia } from 'material-ui/Card';
import Button from 'material-ui/Button';
import Typography from 'material-ui/Typography';
require('../../scss/style.scss');
export default class ProductPage extends Component {
render() {
return (
<div className="product-page">
<h1>Products</h1>
<div className="section-header-line"></div>
<Link to="/products/singleProduct">
Single Product
</Link>
</div>
)
}
}
6条答案
按热度按时间doinxwow1#
我不知道你的确切情况，但这里有几件事...
**一个。**如果您使用的是
[react-router-dom][1]，则需要将交换机 Package 为BrowserRouter，导入方式如下：然后将其添加到交换机周围，如下所示：
两个。
react-router和react-router-dom是两个不同的项目。请确定您的汇入是一致的。请将ProductPage.js ln.2变更为：（现在，它是
import { Link } from 'react-router';）**三。*尝试使用嵌套路由。当涉及到路由时，顺序很重要。如果没有
exact，它会获取您的URL并尝试将其与列表中的第一个匹配。如果您有一个更一般的路由，如/products在/products/somethingspecific之前，路由器将在它遇到第一个路由时路由您，而不会到达更具体的路由 * 尝试以下操作：好运~！
注意：我不太清楚“我的页面突然中断”是什么意思。你在浏览器或控制台上看到任何错误了吗？如果你能分享更多的细节，我想SO社区可以帮助你更多。
u4vypkhs2#
我有一个问题，我的路由器链接不工作，它结束了使用一个
<StyleRoot>在我的App.js，这导致了问题。在删除<StyleRoot>...</StyleRoot>标签从App.js，我添加他们到一个特定的*组件**，真正需要它。在这之后，我的路由器链接工作正常。仔细检查是否有任何CSS样式实用程序，如<StyleRoot>（来自Radium）正在影响您的应用程序。fhity93d3#
我认为您可以尝试用
Router组件 PackageSwitch：yeotifhr4#
您使用的是react-redux，所以我打赌会发生这种情况，因为连接的组件不会被通知道具已经更改，并且react-redux不会重新渲染。
Take a look at this answer.
以及
react-redux故障排除部分。
因此，基本上尝试在使用
connect(...或withRouter的组件上使用{ pure: false }。bfnvny8b5#
您必须确保所有组件都位于Include Header或布局组件中
t9eec4r06#
使用浏览器和路由器
{姓名}
最后一条留言....
`