我正在构建一个带有Rails后端和react-redux前端的音乐流应用程序。从艺术家索引到艺术品展览的React-Router链接冻结了浏览器。
页面其他部分的链接也可以正常工作,包括指向艺术家表演页面的链接。右键单击“在新标签页中打开”可使用此链接。
// from artist_index.jsx
import React from 'react';
import { Link } from 'react-router-dom';
class ArtistIndex extends React.Component {
render() {
return (
<div className="artist-index">
<ul className="artist-index-list">
{this.props.artists.map(artist => {
return <li key={artist.id}>
<Link to={`/artist/${artist.id}`}>{artist.name}</Link>
</li>
})}
</ul>
</div>
);
};
};
export default ArtistIndex;
// from root.jsx
import React from 'react';
import { Provider } from 'react-redux';
import { HashRouter } from 'react-router-dom';
import App from './App';
const Root = ({ store }) => (
<Provider store={store}>
<HashRouter>
<App />
</HashRouter>
</Provider>
);
export default Root;
所有其他链接均正常运行。这是正确接收道具,并且正在更改浏览器的url,只是实际上并未完成重定向。实际上,它完全冻结了浏览器。 Artist Show正在运作。
答案 0 :(得分:0)
当您要使用react-router-dom时,应使用“ react-router-dom”中的 Router,Switch,Route,Link
例如,考虑以下文件:
在 index.js
中import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import App from './app/App';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>, document.getElementById('root'));
在 App.js
中import React from "react"
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"
import categoryIndex from "../components/category/index"
import productIndex from "../components/product/index"
clas App extends Component {
render(){
return (
<Router>
<div className="container"
<Link to={"/category/index"} className="nav-link">
Categories
</Link>
<Link to={"/products/index"} className="nav-link">
Products
</Link>
<Switch>
<Route path="/category/index" component={categoryIndex} />
<Route path="/product/index" component={productIndex} />
</Switch>
</div>
</Router>
);
}
}
export default App;
,然后在目标文件中:
<div id='createNewProduct'>
<Link to={"/product/create"}>
+ Create New Product
</Link>
</div>