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

Question

我正在学习 React，所以这个问题可能没有意义，但我想学习它。

我有 index.html 页面，我想跳转到 Components.html 页面。

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在index.jsx中被调用

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

组件.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;

但是当我点击一个标签 URL 改变但页面保持不变。

Answer 1

用路由器包装你的 App.js 并定义路由。 <Route />允许我们定义应用程序的所有路径。

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>
);

现在在您要使用链接的组件中。 在 React 中，使用<Link />代替锚点。

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

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

链接属性中的 to 类似于锚点中的 href。

记住：

1. npm i react-router-dom
2. Link 的 to 属性必须与 App.js Route 中定义的路径相似。 因为当您单击链接时，它与 App.js 中的路由匹配