Question

我的网站在所有网页上都有相同的标题，导航栏和页脚。我正在使用react-router，我想在每次点击链接时用新页面内容覆盖html主要部分。

以下是我迄今为止所做的尝试：

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Route, Link } from 'react-router-dom'

class BasicExample extends React.Component {
    render() {
        return (
            [
                <Header />,
                <Nav />,
                <Main />,
                <Footer />
            ]
        )
  }
}

function Header() {
    return (
        <header>
            This is a header
        </header>
    )
}

function Main() {
    return (
        <main id='main'>
            Content goes here
        </main>
    )
}

function Footer() {
    return (
        <footer>
            This is a footer
        </footer>
    )
}

function Nav() {
    return (
        <Router>
            <nav>
                <ul>
                  <li><Link to="/">Home</Link></li>
                  <li><Link to="/about">About</Link></li>
                  <li><Link to="/test">Test</Link></li>
                </ul>
            </nav>
        </Router>
    )
}

function Routes() {
    return (
        <Router>
            <div>
                <Route exact path="/" component={Home}/>
                <Route path="/about" component={About}/>
                <Route path="/test" component={Test}/>
            </div>
        </Router>
    )
}

function Home() {
    return (
      <div>
        <h2>Home</h2>
      </div>
    )
}

function About() {
    return (
      <div>
        <h2>About</h2>
      </div>
    )
}

function Test() {
    return (
      <div>
        <h2>Test</h2>
      </div>
    )
}

ReactDOM.render(
    <BasicExample />,
    document.getElementById('container')
);

ReactDOM.render(
    <Routes />,
    document.getElementById('main')
);

这是可以使用react-router还是违反了一些基本的反应原则？在此先感谢您的帮助。

Answer 1

一些混合点

1）您需要一个包含您的身份

的html输出

2）重复路由器调用

3）您需要在switch语句

下调用您的路由

你的HTML中的Somwhere：

<div id="container"></div>

jsx：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'

class BasicExample extends React.Component {
  render() {
    return [<Header />, <Nav />,<Main />, <Footer />];
  } 
}

function Header() {
  return <header>This is a header</header>;
}

function Main() {
  return <main id="main">Content goes here</main>;
}

function Footer() {
  return <footer>This is a footer</footer>;
}

function Nav() {
  return (
    <BrowserRouter >
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/test">Test</Link>
          </li>
        </ul>
      </nav>
    </BrowserRouter >
  );
}

function Routes() {
  return (
    <BrowserRouter >
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/test" component={Test} />
      </Switch>
    </BrowserRouter >
  );
}

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function Test() {
  return (
    <div>
      <h2>Test</h2>
    </div>
  );
}

ReactDOM.render(<BasicExample />, document.getElementById("container"));

ReactDOM.render(<Routes />, document.getElementById("main"));

Answer 2

我认为没有任何反应路由器的规则被违反。反应路由器文档中完全相同。

Answer 3

我还没有对此进行测试，但下面有一些明显的问题我已经改变了：

将路由器移至主功能。（导航栏中不需要）
删除重复的ReactDOM.render调用
将main渲染为switch语句。

删除路由功能。

class BasicExample extends React.Component {
    render() {
        return (
            <Router>
                <Header />
                <Nav />
                <Main />
                <Footer />
            </Router>
        )
  }
}

function Header() {
    return (
        <header>
            This is a header
        </header>
    )
}

function Main() {
    return (
        <main id='main'>
              <Switch>
                <Route exact path="/" component={Home}/>
                <Route path="/about" component={About}/>
                <Route path="/test" component={Test}/>
              </Switch>
        </main>
    )
}

function Footer() {
    return (
        <footer>
            This is a footer
        </footer>
    )
}

function Nav() {
    return (
            <nav>
                <ul>
                  <li><Link to="/">Home</Link></li>
                  <li><Link to="/about">About</Link></li>
                  <li><Link to="/test">Test</Link></li>
                </ul>
            </nav>
    )
}

function Home() {
    return (
      <div>
        <h2>Home</h2>
      </div>
    )
}

function About() {
    return (
      <div>
        <h2>About</h2>
      </div>
    )
}

function Test() {
    return (
      <div>
        <h2>Test</h2>
      </div>
    )
}

ReactDOM.render(
    <BasicExample />,
    document.getElementById('container')
);

Answer 4

感谢大家的回答。这是我提出的解决方案：

给出像这样的index.html：

<body>
  <div id="root">
      <header id="header"></header>
      <nav id="nav"></nav>
      <main id="main"></main>
      <footer id="footer"></footer>
  </div>
</body>

你不能像这样使用ReactDom.render写一个父母和一个孩子：

ReactDOM.render(
    element,
    document.getElementById('root')
);
ReactDOM.render(
    element,
    document.getElementById('header')
);

但你可以这样写给兄弟姐妹：

ReactDOM.render(
    element,
    document.getElementById('header')
);
ReactDOM.render(
    element,
    document.getElementById('main')
);

所以这是我在index.js中的解决方案：

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Route, Link } from 'react-router-dom'

class BasicExample extends React.Component {
    render() {
        return (
            <div id="dummy">
                <Header />
                <Nav />
                <Footer />
            </div>
        );
    }
}

function Header() {
    const element =  <header>This is a header</header>;

    ReactDOM.render(
        element,
        document.getElementById('header')
    );
    return null;
}

function Nav() {
    const element = 
        <Router>
            <nav>
                <ul>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/test">Test</Link></li>
                </ul>
                <Route exact path="/" component={Home}/>
                <Route path="/about" component={About}/>
                <Route path="/test" component={Test}/>
            </nav>
        </Router>
    ;

    ReactDOM.render(
        element,
        document.getElementById('nav')
    );
    return null;
}

function Footer() {
    const element = <footer>This is a footer</footer>

    ReactDOM.render(
        element,
        document.getElementById('footer')
    );
    return null;
}

function Home() {
    const element = <h1>Home</h1>

    ReactDOM.render(
        element,
        document.getElementById('main')
    );
    return null;
}

function About() {
    const element = <h1>About</h1>

    ReactDOM.render(
        element,
        document.getElementById('main')
    );
    return null;
}

function Test() {
    const element = <h1>Test</h1>

    ReactDOM.render(
        element,
        document.getElementById('main')
    );
    return null;
}

ReactDOM.render(
    <BasicExample />,
    document.getElementById('header')
);

如果你想让你的组件成为类，你可以这样做：

class Footer extends React.Component {
    render() {             
        return (
            <Myfoot />
        )
    }
};

function Myfoot() {
    const element =  (
         <div id="home" className="col-lg-12">
            <h2>Footer</h2>
         </div>
     )

     return (
         ReactDOM.render(
             element,
             document.getElementById('footer')
         )
     );

}

我测试了这一切，它似乎没有警告或错误。

由于

如何让React-Router仅在更改页面时覆盖<main>

4 个答案: