我是React和redux的新手。我在浏览网址时遇到问题。 (请查看下面的文件)。 Index.js是我的反应文件,链接到带有id' index'的html页面。在Index.js文件中,我正在渲染Home.jsx文件' Home'零件。在Home.jsx文件中,我添加了两个Routes-List,AddForm,其中显示了路径。此外,我还提供了一个反应组件' HomeNavBar'。 AddForm.js和ListBox.jsx分别是AddForm和List组件的反应文件。带有HomeNavBar组件的HomeNavBar.jsx有一个Link' add'如图所示。默认情况下,将显示List组件。点击链接时添加'我想用AddForm组件替换List组件,AddForm组件是从AddForm.js呈现。现在问题是当我点击链接时,地址栏中的网址正在改变。但组件没有变化。仍显示List组件。控制台没有错误。有人请帮助我。 (说真的,我想用路由器做这件事)
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from '../store/store';
import Home from './Home.jsx';
ReactDOM.render(<Provider store={store}>
<Home />
</Provider>, document.getElementById('index'));
Home.jsx
import React from 'react';
import List from './ListBox.jsx';
import AddForm from './AddForm.react.js'
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import HomeNavBar from './HomeNavBar.jsx'
class Home extends React.Component {
render(){
return(
-------blah blah----
<div>Blah blah balh</div>
<HomeNavBar />
<div>
<Router>
<Switch>
<Route exact path="/" component={List} />
<Route path="/add" component={AddForm} />
</Switch>
</Router>
</div>
------blah--blah--------
)}}
export default Home
AddForm.js
also a react file with some html form contents
ListBox.jsx
also a react file with some html contents
HomeNavBar.jsx
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
class HomeNavBar extends React.Component {
render() {
return(
<Router>
<div>
<li><Link to={'/add'}>Add Movie</Link></li>
--------blah blah blah-------------------
</div>
</ Router>
);
}
}
export default HomeNavBar
web.config文件是
var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
module.exports = {
context: __dirname,
entry: './assets/js/components/Index.react.js', // entry point of our app. assets/js/index.js should require other js modules and dependencies it needs
output: {
path: path.resolve('./assets/bundles/'),
filename: "[name].js",
},
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
],
module: {
loaders: [
{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query:{ plugins: ['transform-decorators-legacy'] }}, // to transform JSX into JS
{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'class-to-classname', query:{ plugins: ['transform-decorators-legacy'] }}, // to transform JSX into JS
],
},
resolve: {
extensions: ['.js', '.jsx']
},
}
请查看demo here
在演示中,您可以看到,当我点击添加电影时,网址正在发生变化但内容却没有变化。内容仅在刷新时更改。
答案 0 :(得分:1)
复制粘贴以下内容 - 在 Home.js
import React from 'react';
import HomeNavBar from './HomeNavBar.js'
import List from './ListBox.js';
import AddForm from './AddForm.js'
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
class Home extends React.Component {
render(){
return(<Router>
<div>
<HomeNavBar/>
<div>
<Route exact path="/" component={List} />
<Route path="/add" component={AddForm} />
</div>
</div>
</Router>);
}
}
export default Home
homeNavBar.js 中的
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
class HomeNavBar extends React.Component {
render() {
return(
<div>
<Link to='/add'>Add Movie</Link>
</div>
);
}
}
export default HomeNavBar
问题原因是:
将<Link />
包含在<Router />
内,而不是将整个呈现的组件包含在<Router />
内。其他人可以更好地解释原因。
答案 1 :(得分:1)
我认为你搞砸了你的路线。请在下面找到一些建议:
您可以将路线包裹在一些组件中,这些组件将呈现路线并且还可以具有导航链接。在你的情况下,如果你使用HomeNavBar
,它将是这样的,
<Router>
<HomeNavBar>
<Switch>
<Route exact path="/" component={List} />
<Route path="/add" component={AddForm} />
</Switch>
</HomeNavBar>
</Router>
您已在HomeNavBar
中再次定义了路线。我认为那些是
不需要。它可以简单明了。您可以在此NavLink
上使用Link
,
...
<div>
<NavLink to="/add">Add Movie</NavLink>
...
</div>
<div>
{this.props.children}
<div>
...
希望这有帮助。
根据以上建议答案 2 :(得分:1)
在主页组件中的路由器标记内移动 HomeNavBar
class Home extends React.Component {
render(){
return(
<div>
<Router>
<div>
<HomeNavBar />
<Switch>
<Route exact path="/" component={List} />
<Route path="/add" component={AddForm} />
</Switch>
</div>
</Router>
</div>
)}}
并删除 HomeNavBar 组件中的路由器
class HomeNavBar extends React.Component {
render() {
return(
<div>
<li><Link to={'/add'}>Add Movie</Link></li>
</div>
);
}
以下是working demo