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;

在 index.jsx

内部调用

RouteToComponent.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;

但是，当我单击标签时，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。

记住：

npm我react-router-dom
to属性必须类似于App.js Route中定义的路径。因为当您单击“链接”时，它会匹配App.js中的路由

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

1 个答案: