在React JS中使用一个组件导航另一个组件

npm install react react-dom react-router-dom

import React from 'react';
import { Link } from 'react-router-dom';

const NavBar = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/page">导航到Page组件</Link>
        </li>
      </ul>
    </nav>
  );
}

export default NavBar;

import React from 'react';

const Page = () => {
  return (
    <div>
      <h1>Page组件</h1>
      <p>这是要导航到的Page组件的内容。</p>
    </div>
  );
}

export default Page;

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import NavBar from './NavBar';
import Page from './Page';

const App = () => {
  return (
    <BrowserRouter>
      <NavBar />
      <Route path="/page" component={Page} />
    </BrowserRouter>
  );
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));