Question

因此，我试图建立一个SPA（单页面应用程序），我有点难过如何在整个应用程序中包含一个通用的导航栏，而不是通过整个应用程序包含它。

我现在设计代码的方式如下：

ReactDOM.render(<Provider store={store}><BrowserRouter><App /></BrowserRouter></Provider>, document.getElementById('root'));

这是我在根元素处使用browserouter的地方。

然后我在我的App组件中：

<div>
    <Header />
    <Router>
      <Route exact path='/' component={Post} />
      {this.props.categories && this.props.categories.map((cat, i) => {
        console.log(cat.path)
        return <Route path={`/${cat.path}`} component={array[i]} key={i} />
      })}
    </Router>
  </div>

有人可以指出我做错了什么以及我应该怎么做，因为我没有线索。

Answer 1

您的应用组件中的

使用Switch而不是Router，您正在使用两个路由器你可以在浏览器路由器中为App提供路由

ReactDOM.render(<Provider store={store}><BrowserRouter><Route path="/" component={App} /></BrowserRouter></Provider>, document.getElementById('root'));

Answer 2

在React Router V4中，我们鼓励您使用顶级BrowserRouter组件，只是为了提供历史API作为上下文。如果您愿意，您实际上可以在应用中的不同位置同时渲染多条路线。尝试使用<Switch>并将您的路线放在其中。此组件将显示与当前路径匹配的类型<Route>的第一个子项。还提供exact道具，以确保在更深的嵌套可用时不显示嵌套路线。你的最后一个例子看起来像这样：

<div>
    <Header />
    <Switch>
        {categories.map(cat => <Route {...cat} />)}
    </Switch>
</div>

在categories内，您可以拥有渲染路线所需的道具，例如path和component。这使您的示例更简洁。

＆＃13;

const Component = React.Component
const { Switch, Route, Link } = ReactRouterDOM
const Router = ReactRouterDOM.BrowserRouter

const Home = () => <h1>Home</h1>
const Post1 = () => <h1>React</h1>
const Post2 = () => <h1>Redux</h1>
const Post3 = () => <h1>Udacity</h1>

const routes = [
	{
  	name: 'Home',
  	path: '/',
    component: Home
  },
  {
  	name: 'React',
    path: '/react',
    component: Post1
  },
  {
  	name: 'Redux',
  	path: '/redux',
    component: Post2
  },
  {
  	name: 'Udacity',
  	path: '/udacity',
    component: Post3
  }
]

const Header = () => <header>
  <nav>
    {routes.map(route => <Link to={route.path} key={route.path} >{route.name}</Link>)}
  </nav>
</header>

class App extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div>
        <Header />
        <Switch>
          {routes.map(route => <Route {...route} key={route.path} exact/>)}
        </Switch>
      </div>
    );
  }
}

ReactDOM.render(
	<Router><App/></Router>,
  document.getElementById('container')
);

＆＃13;

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react-router/umd/react-router.min.js"></script>
<script src="https://unpkg.com/react-router-dom@4.2.0/umd/react-router-dom.min.js"></script>
<div id="container">
    <!-- NOTE: in this embedded fiddle, React Router will not work. See https://jsfiddle.net/tay99xu0/ for working demo reference. -->
</div>

＆＃13;

如何与反应路由器有共同的组件？

2 个答案: