React App没有路由到链接

Question

我是React的新手，但路由器存在问题。 我只是从本教程中学习： https : //medium.com/@thejasonfile/basic-intro-to-react-router-v4-a08ae1ba5c42

下面是从我的index.html调用的代码。 当我单击“显示列表”链接时，URL从localhost：8080更改为localhost：8080 / list，但实际上并未更改页面的上下文。 我不确定这是怎么回事或我在做什么错。 有任何想法吗？

Scripts.js

import React from 'react';
import ReactDOM from 'react-dom';

import {Title, App} from './Components/App';
import { BrowserRouter as Router, Route } from 'react-router-dom';

ReactDOM.render(
    <Router>
      <div>
        <Route exact path="/" component={Title} />
        <Route path="/list" component={App} />
      </div>
  </Router>
    , document.getElementById('app'));

App.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
const Title = () => {
  return (
      <div className="title">
        <h1>React Router demo</h1>
        <Link to="/list">
          <button>Show the List</button>
          </Link>
          </div>
      )};
const List = () => {
  return (
    <div className="nav">
      <ul>
        <li>list item</li><li>list item</li></ul><Link to="/"><button>Back Home</button></Link></div>)
}
module.exports = {
  Title,
  List
};

Answer 1

我对您的代码进行了一些重构，您不应为单个页面呈现App组件，而是您的App组件应具有所有路由，例如我在下面的操作方式。 然后，根据需要在需要导航时在整个组件中添加Link ，然后分别在App添加路线。

import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Link } from 'react-router-dom';

class App extends Component {
  constructor() {
    super();
  }

  render() {
    return (
    <Router>
      <div>
        <Route exact path='/home' render={()=> <Title />} > </Route>
        <Route exact path='/list' render={() => <List />} > </Route>
      </div>
    </Router>
    );
  }
}

const Title = () => {
  return (
      <div className="title">
        <h1>React Router demo</h1>
        <Link to="/list">
          <button>Show the List</button>
          </Link>
          </div>
      )};
const List = () => {
  return (
    <div className="nav">
      <ul>
        <li>list item</li><li>list item</li></ul><Link to='/home'><button>Back Home</button></Link></div>)
}
render(<App />, document.getElementById('app'));

document.getElementById通常是root就像您将其更改为app一样。