React 路由器更改 URL 但不更改视图

Question

您好，我的反应项目中有一个单独的路由和链接文件，当单击链接时，它会更改 URL，但不会更改视图，我不知道为什么。

这是我的 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import Routes from "./router";
import RenderSite from './App';

ReactDOM.render(<BrowserRouter><RenderSite /></BrowserRouter>, document.getElementById('site-wrapper'));

这是我的链接文件

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

const HeaderNav = () => {
    return(
        <div className="header-links">
            <Link to="/" className="link">Home</Link>
            <Link to="/about" className="link">About</Link>
            <Link to="/contact" className="link">Contact Us</Link>
        </div>
    );
}

export default HeaderNav;

最后这是我的 router.js

import React from 'react'
import HomePage from './pages/home'
import AboutPage from './pages/about'
import ContactPage from './pages/contact'
import {
  Switch,
  Route
} from 'react-router-dom';

const Routes = () => (
    <Switch>
      <Route exact path="/" component={HomePage} />
      <Route exact path="/about" component={AboutPage} />
      <Route exact path="/contact" component={ContactPage} />
    </Switch>
);

export default Routes;

为清楚起见，这里是我尝试加载的页面之一的示例：

import React from 'react'
import PageLayout from '../components/layout'

class AboutPage extends React.Component  {
    render() {
      return (
        <div>
        <PageLayout />
        <p>About page</p>
        </div>
      );
    }
}

export default AboutPage

Answer 1

在BrowserRouter中导入BrowserRouter和 Wrap 路由

import React from 'react'
import HomePage from './pages/home'
import AboutPage from './pages/about'
import ContactPage from './pages/contact'
import {
  Switch,
  Route,
  BrowserRouter as Router
} from 'react-router-dom';

const Routes = () => (
    <Router>
     <Switch>
      <Route exact path="/" component={HomePage} />
      <Route exact path="/about" component={AboutPage} />
      <Route exact path="/contact" component={ContactPage} />
     </Switch>
    </Router> 
);

export default Routes;

Answer 2

我看不到您的App.js代码。 您已经在index.js中导入了Routes但还没有使用它。 您需要在App组件中添加Routes组件。如下所示：

function App(){
  return(
    <div>
      {Routes()}
    </div>
  )
}