React组件未被替换-Java 学习之路

我是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组件 . 单击带有'add'的链接时，我想用AddForm.js渲染的AddForm组件替换List组件 . 现在问题是当我点击链接时，地址栏中的网址正在改变 . 但组件没有变化 . 仍显示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

在演示中你可以看到，当我点击 Add movie 时，网址正在改变，但内容却没有 . 内容仅在刷新时更改 .

3 回答

在 Home 组件中的Router标记内移动 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

回复于 2024-04-20T04:08:28+08:00

1
我想你搞砸了你的路线 . 请找到以下几点建议：
- 您可以将路线包裹在某个组件中，该组件将呈现路线并且还可以具有导航链接 . 在你的情况下，如果你使用 HomeNavBar ，它将是这样的，
```
<Router>
   <HomeNavBar>
    <Switch>
      <Route exact path="/" component={List} />
      <Route path="/add" component={AddForm} />
    </Switch>
   </HomeNavBar>
 </Router>
```
- 您已在 HomeNavBar 中再次定义了路线 . 我认为不需要那些 . 它可以简单明了 . 您可以在 Link 上使用 NavLink ，
```
...
<div>
  <NavLink to="/add">Add Movie</NavLink>
  ...
</div>
<div>
  {this.props.children}
<div>
...
```
希望这可以帮助 .

Update : Working example基于以上建议
回复于 2024-04-20T04:08:28+08:00

复制粘贴以下内容 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

The Problem was caused by: 将 <Link /> 包裹在 <Router /> 内并且不将整个渲染的组件包含在 <Router /> 中 . 其他人可以更好地解释原因 .

回复于 2024-04-20T04:08:28+08:00

React组件未被替换

3 回答

相关问题