Question

我正在尝试实现一个包含路由器的简单程序。我正在使用'react-router-dom'。

以下是我的App.jsx的样子

import React from 'react';
import { BrowserRouter, Switch, Route  } from 'react-router-dom';
import { Headerbar } from './HeaderBar.jsx';
import Home from './Home.jsx';
import About from './About.jsx';

export default class App extends React.Component {
  render() {
    return (
    <div style={{textAlign: 'center'}}>
        <Headerbar />
        <BrowserRouter>
          <Switch>
            <Route
              path="/about" exact component={About} />
            <Route
              path="/home" exact component={Home} />
          </Switch>
        </BrowserRouter>
    </div>);
  }
}

这是从index.js中调用的，它读取类似这样的内容

import './styles/global.scss';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

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

现在，我尝试渲染的组件非常简单。其中一个'About.jsx'读到的内容如下：

import React from 'react';

export default class About extends React.Component {
    constructor() {
        super();
        console.log('about component');
    }
    render(){
        return (
            <div className="content">
                <h1>About page</h1>
                <a href="/">Go back to home</a>
            </div>
        );
    }
}

类似的是Home组件的代码。

此处是HeaderBar.jsx，其中包含更改路径的链接。

import '../styles/components/headerBar.scss';
import React from 'react';

export class Headerbar extends React.Component {
    render () {
        return (
            <div className="header-container">
                <div className="heading">
                    <h1 className="header-text">Simple User List</h1>
                </div>
                <div className="links">
                    <a href="/about" style={{float:"right"}}>About</a>
                    <a href="/" style={{float:"right"}}>Home</a>
                </div>
            </div>
        );
    }
}

非常感谢这方面的任何帮助。此外，如果您可以指出在创建此类代码块时可以遵循的最佳实践。提前谢谢。

Answer 1

这条线上的路径不好。

<Route path="/home" exact component={Home} />

只需更改为

<Route path="/" exact component={Home} />

Answer 2

没有路由符合您的根路径要么你可以改变你的一条路径"/"，要么你可以重定向到你的一条路线，只需在App.jsx中添加这个内部的switch语句

<Route exact path="/" render={() => (<Redirect to="/home" />)} />

Answer 3

从最初的事情开始，

而不是路线path='/home'，您应该path='/'

export default class App extends React.Component {
  render() {
    return (
    <div style={{textAlign: 'center'}}>
        <Headerbar />
        <BrowserRouter>
          <Switch>
            <Route
              path="/about" exact component={About} />
            <Route
              path="/" exact component={Home} />
          </Switch>
        </BrowserRouter>
    </div>);
  }
}

或使用Redirect

export default class App extends React.Component {
  render() {
    return (
    <div style={{textAlign: 'center'}}>
        <Headerbar />
        <BrowserRouter>
          <Switch>
            <Route
              path="/about" exact component={About} />
            <Route
              path="/home" exact component={Home} />
            <Redirect to="/home" />
          </Switch>
        </BrowserRouter>
    </div>);
  }
}

和

其次，不要使用anchor tag，而是使用Link来更改路线

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

export default class About extends React.Component {
    constructor() {
        super();
        console.log('about component');
    }
    render(){
        return (
            <div className="content">
                <h1>About page</h1>
                <Link to="/">Go back to home</Link>
            </div>
        );
    }
}

和

export class Headerbar extends React.Component {
    render () {
        return (
            <div className="header-container">
                <div className="heading">
                    <h1 className="header-text">Simple User List</h1>
                </div>
                <div className="links">
                    <Link to="/about" style={{float:"right"}}>About</Link>
                    <Link to="/" style={{float:"right"}}>Home</Link>
                </div>
            </div>
        );
    }
}

Answer 4

请在App组件中按如下方式更新about组件路径 <Route exact path="/" component={About} /> 代替 <Route path="/about" exact component={About} />

由于浏览器默认指向＆＃39; /＆＃39;最初

React路由器在新路由上不显示任何内容

4 个答案: