React组件未被替换

时间:2018-02-23 13:22:39

标签: reactjs react-router react-redux

我是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

在演示中,您可以看到,当我点击添加电影时,网址正在发生变化但内容却没有变化。内容仅在刷新时更改。

3 个答案:

答案 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>
    ...
    

希望这有帮助。

根据以上建议

更新 Working example

答案 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