重定向到 react.js 中的 static html 页面

Question

I am learning React, so this question may make no sense but I want to learn it.

I have index.html page and I want to jump to Components.html page.

RouteToComponent.jsx

import React from 'react';

class RouteToComponents extends React.Component {
    render() {
        return (
            <div>
                <a href="Components/Components.html">Components</a>
            </div>
        );
    }
}

export default RouteToComponents;

RouteToComponent.jsx is called inside index.jsx

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import RouteToComponents from './BasicJSX/RouteToComponents.jsx';

class App extends React.Component {
    render() {
        return (
            <div>
                Hello World!!!
                <RouteToComponents />
            </div>
        );
    }
}

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

export default App;

components.jsx

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

class App extends React.Component {
    render() {
        return (
            <div>
                Entered Components HTML!!!
            </div>
        );
    }
}

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

export default App;

But when I click on a tag URL changes but the page remains same.

Answer 1

Wrap your App.js with Router and define Routes. <Route /> allows us to define all paths of our Application.

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import RouteToComponents from './RouteToComponents.jsx';
import AnyComponent from './AnyComponent';
import App from './App.jsx';

return (
 <Router>
   <RouteToComponents />
   <Switch>
     <Route exact path="/" component={App} />
     <Route path="/Components/Components.html" component={AnyComponent} />
   </Switch>
  </Router>
);

Now in your Component where you want to use Link. In React <Link /> is used instead of anchor.

import { Link } from "react-router-dom";

return (
    <div>
       <Link to="Components/Components.html">Components</Link>
       <Link to="/">Home</Link>
    </div>
 );

to in Link attribute is similar to href in anchor.

Remember:

1. npm i react-router-dom
2. to attribute of Link must be similar to the path defined in App.js Route. Because when you click on Link it matches Routes in App.js