React 组件没有被替换

Question

我是 React 和 redux 的新手。我在浏览 URL 时遇到问题。 （请查看以下文件）。 Index.js 是我的反应文件，它与 id 为“index”的 html 页面链接。在 Index.js 文件中，我正在渲染 Home.jsx 文件的“主页”组件。在 Home.jsx 文件中，我添加了两个路由列表 AddForm，路径显示在那里。我还在那里渲染了一个反应组件'HomeNavBar'。 AddForm.js 和 ListBox.jsx 分别是带有 AddForm 和 List 组件的反应文件。带有 HomeNavBar 组件的 HomeNavBar.jsx 有一个链接“添加”，如图所示。默认情况下会显示 List 组件。单击带有“添加”的链接时，我想用从 AddForm.js 呈现的 AddForm 组件替换 List 组件。现在的问题是当我点击链接时，地址栏中的 url 正在改变。但组件没有改变。仍然显示 List 组件。控制台没有错误。有人请帮助我。 （说真的，我想用路由器来做这个）

索引.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

在演示中，您可以看到，当我单击 添加电影 时，网址会发生变化，但内容不会发生变化。内容仅在刷新时更改。

Answer 1

在 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 组件中的 Router

class HomeNavBar extends React.Component {
render() {
    return(
            <div>
                 <li><Link to={'/add'}>Add Movie</Link></li>
            </div>
    );
}

这里是working demo

Answer 2

我认为你搞砸了你的路线。请在下面找到一些建议：

• 您可以将您的路线包装在一些组件中，该组件将呈现路线并且还可以具有导航链接。在您的情况下，如果您使用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 基于以上建议

Answer 3

复制粘贴以下内容- 在 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 /> 中。其他人可能可以更好地解释原因。