Javascript Django/ReactJS如何添加Django URL作为道具？

请记住，我对react/django非常新鲜，我需要所有能得到的帮助

我想用React在我的应用程序中创建一个导航栏组件。问题是导航栏有到应用程序其他部分的链接。
我试图做的是将一个包含所有链接的数组作为道具传递给我的navbar组件。但是如何动态地获取javascript中的链接呢

现在我有这个：

index.js：

let navbarUrls = [
  {key: 0, url: "{% url 'main:index' %}"}
];

ReactDOM.render(<Navbar urls={navbarUrls} />, document.getElementById('navbar'));

让NavBarURL=[
{键：0，url:“{%url”主：索引“%}”
];
ReactDOM.render（，document.getElementById（'navbar'）；

Navbar.js：

import React, {Component} from 'react';

class Navbar extends Component {
    render() {
        return (
            <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                   {this.props.urls.map(url => (
                      <a class="navbar-brand" key={url.key} href={url.url}>Main Page</a>
                    ))}
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                    </ul>
                    <div class="navbar-brand">
                        <div id="current-time">
                        </div>
                    </div>
                </div>
            </nav>
        )
    }
}

export default Navbar

import React，{Component}来自'React'；
类导航栏扩展组件{
render（）{
返回(
{this.props.url.map（url=>(
))}


)
}
}
导出默认导航栏

---

在创建元素时，链接当然不是，因为它不识别细枝。。。也许我完全错了？有人能告诉我正确的方法吗？

我正在与React和Django合作。我也面临过类似的问题

const navbarUrls = [
        {title: 'TAB-1', path: ''},
        {title: 'TAB-2', path: 'tab2'},
        {title: 'TAB-2', path: 'tab3'},
    ];

假设这些是你的链接

现在创建一个导航栏组件

import React, {Component} from 'react';
import {Link} from 'react-router-dom'; // install react-router and react-router-dom version 4.x

class Navbar extends Component {

    render() {
        return (
            <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                   {this.props.navbarUrls.map(link => (
                      <Link to={link.path}>{link.title}</Link>
                    ))}
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                    </ul>
                    <div class="navbar-brand">
                        <div id="current-time">
                        </div>
                    </div>
                </div>
            </nav>
        )
    }
}

export default Navbar

如果您不熟悉，请阅读react router的文档

import * as React from 'react';
import * as ReactDOM 'react-dom';
import {Route, HashRouter, Switch, Redirect} from 'react-router-dom';
import Navbar from 'your-path';


    ReactDOM.render(
       <HashRouter> // you can use BrowserRoute as well.
          <Navbar urls={navbarUrls} />
               <Switch>
                    <Route extact path="/" component={YourComponent1}/>
                    <Route path="/tab2" component={YourComponent2}/>
                    <Route path="/tab2" component={YourComponent2}/>
                </Switch>
        </HashRouter>,
      document.getElementById('app')); //id from your main html page.